import styled, { css } from 'styled-components';

interface Flex {
  justifyContent?: string;
  alignItems?: string;
  wrap?: string;
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const Flex = styled(({ wrap, justifyContent, alignItems, ...rest }) => <div {...rest} />)<Flex>`
  display: flex;

  ${props => props.justifyContent && css`
    justify-content: ${props.justifyContent};
  `}

  ${props => props.alignItems && css`
    align-items: ${props.alignItems};
  `}
  
  ${props => props.wrap && css`
    flex-wrap: ${props.wrap};
  `}
`;

interface FlexItem {
  flex: number;
}

export const FlexItem = styled.div<FlexItem>`
  flex: ${props => props.flex};
`;