// @flow
import type { StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import type { GridItemProps } from './grid-item.proptypes';
import {
  widthSm,
  widthMd,
  widthLg,
  widthXl,
  paddingLeftSm,
  paddingLeftMd,
  paddingLeftLg,
  paddingLeftXl,
} from './grid-item.css-rules';
import { bpMedium, bpLarge, bpXLarge } from '../../../../breakpoints';
import { getStackedRules } from '../../../../mixins/stacking';

export const GridItem: StatelessFunctionalComponent<GridItemProps> = styled.div`
  width: ${widthSm};
  padding-left: ${paddingLeftSm};

  @media (min-width: ${bpMedium}) {
    width: ${widthMd};
    padding-left: ${paddingLeftMd};
  }

  @media (min-width: ${bpLarge}) {
    width: ${widthLg};
    padding-left: ${paddingLeftLg};
  }

  @media (min-width: ${bpXLarge}) {
    width: ${widthXl};
    padding-left: ${paddingLeftXl};
  }

  ${getStackedRules}
`;

GridItem.displayName = 'GridItem';
