import { get } from 'lodash'
import { H2 } from '@pubsweet/ui'
import styled, { css } from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'

import { marginHelper } from './'

const width = props => css`
  width: calc(${th('gridUnit')} * ${get(props, 'width', 50)});
`

export default styled.div`
  background-color: ${th('colorBackgroundHue')};
  border-radius: ${th('borderRadius')};
  box-shadow: ${th('boxShadow')};
  display: flex;
  flex-direction: column;

  padding: calc(${th('gridUnit')} * 2);
  position: ${props => get(props, 'position', 'initial')};

  ${width};
  ${marginHelper};

  ${H2} {
    text-align: center;
  }
`