import type { Theme } from './utils';
import { getStyles } from './utils';
import styled from 'styled-components';

type WithArrayType<T> = {
  [K in keyof T]: Array<T[K]> | T[K];
};

type AllowedProps = Omit<HTMLDivElement['style'], 'color' | 'translate'>;

export type GridProps = Partial<WithArrayType<AllowedProps>>;
export const Grid = styled.div<GridProps>`
  display: grid;
  ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
`;

export type FlexProps = GridProps;
export const Flex = styled.div<GridProps>`
  display: flex;
  ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
`;

export type BoxProps = GridProps;
export const Box = styled.div<GridProps>`
  ${({ theme, ...props }: GridProps & { theme: Theme }) => getStyles(props, theme)}
`;