import React from 'react';
import { BfoGrid, BfoGridItemSizes } from './grid';

const Box = () => {
  return (
    <div
      style={{
        background: '#1d2e40',
        width: '100%',
        height: 'auto',
        padding: '1rem',
        borderRadius: '8px',
        color: '#eee',
      }}
    >
      Item
    </div>
  );
};

export const sizes = () => {
  return Object.values(BfoGridItemSizes).map(size => (
    <div key={size}>
      <h2>Size: {size}</h2>
      <BfoGrid itemSize={size}>
        <Box />
        <Box />
        <Box />
        <Box />
        <Box />
        <Box />
        <Box />
        <Box />
        <Box />
        <Box />
        <Box />
        <Box />
      </BfoGrid>
    </div>
  ));
};