import styled from 'styled-components';

import { space } from '../../../theme/global/space';
import StyledCol from '../Col/StyledCol';

type Space = typeof space;
type Gutter = keyof Space | 'none';

const StyledRow = styled.div<{
  gutter: [Gutter, Gutter];
}>`
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  ${({ theme, gutter: [horizontalGutter] }) =>
    horizontalGutter === 'none'
      ? ``
      : `
          margin-left: -${theme.space[horizontalGutter] / 2}px;
          margin-right: -${theme.space[horizontalGutter] / 2}px;
          > ${StyledCol} {
            padding-left: ${theme.space[horizontalGutter] / 2}px;
            padding-right: ${theme.space[horizontalGutter] / 2}px;
          }
        `};
  ${({ theme, gutter: [, verticalGutter] }) =>
    verticalGutter === 'none'
      ? ``
      : `
          margin-top: -${theme.space[verticalGutter] / 2}px;
          margin-bottom: -${theme.space[verticalGutter] / 2}px;
          > ${StyledCol} {
            padding-top: ${theme.space[verticalGutter] / 2}px;
            padding-bottom: ${theme.space[verticalGutter] / 2}px;
          }
        `};
`;

export default StyledRow;