import styled from 'styled-components';

import { mapBreakpointCss } from '../utils';

type ColPos =
  | 0
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11
  | 12
  | 13
  | 14
  | 15
  | 16
  | 17
  | 18
  | 19
  | 20
  | 21
  | 22
  | 23;
type ColSpan = ColPos | 24;

const StyledCol = styled.div<{
  offset: [ColPos, ColPos, ColPos, ColPos, ColPos];
  span: [ColSpan, ColSpan, ColSpan, ColSpan, ColSpan];
}>`
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  ${props => `
    ${mapBreakpointCss(props.span, value =>
      value === 0
        ? `
            display: none;
          `
        : `
            display: block;
            width: calc(100% / 24 * ${value});
          `
    )}
    ${mapBreakpointCss(
      props.offset,
      value => `
        margin-left: calc(100% / 24 * ${value});
      `
    )}
  `};
`;

export default StyledCol;