import React from 'react';
import styled from 'styled-components';
import { BreakpointMedia, Gutters } from '../../../tokens';
import type { GlobalProps } from '@lendi-ui/commons/utils';

export interface GridProps extends GlobalProps {
  children: React.ReactNode;
  className?: string;
}

const StyledGrid = styled.div<GridProps>`
  display: flex;
  flex-wrap: wrap;
  margin-left: -${Gutters.sm};
  margin-top: -${Gutters.sm};

  ${BreakpointMedia.sm} {
    margin-left: -${Gutters.md};
    margin-top: -${Gutters.md};
  }

  > * {
    padding-left: ${Gutters.sm};
    padding-top: ${Gutters.sm};

    ${BreakpointMedia.sm} {
      padding-left: ${Gutters.md};
      padding-top: ${Gutters.md};
    }
  }
`;

export const Grid = ({ children, ...props }: GridProps) => {
  return <StyledGrid {...props}>{children}</StyledGrid>;
};