import React from 'react';
import cn from 'classnames';

export enum BfoGridItemSizes {
  's' = 's',
  'm' = 'm',
  'l' = 'l',
}

type Props = {
  gapSize?: 's' | 'm' | 'l';
  /**
   * Smaller items will have more per row
   */
  itemSize?: keyof typeof BfoGridItemSizes;
  children: React.ReactNode;
};

export const BfoGrid: React.FC<Props> = ({
  children,
  gapSize = 'm',
  itemSize = BfoGridItemSizes.m,
}: Props) => {
  const classes = cn(
    'bfo-grid',
    `bfo-grid--gap-size-${gapSize}`,
    `bfo-grid--item-size-${itemSize}`,
  );
  return (
    <section className={classes}>
      {React.Children.map(children, child => (
        <article className="bfo-grid__item">{child}</article>
      ))}
    </section>
  );
};