import type { FC, ReactNode } from 'react';

import Box from '~/src/components/Box';
import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';

const CellContainer: FC<{ items: ReactNode[] }> = ({ items }) => {
  const isLargeScreen = useIsLargeScreen();

  return (
    <Box maxWidth={740} isCentered>
      <div
        className="container"
        style={{
          flexWrap: 'wrap',
        }}
      >
        {items.filter(Boolean).map((content: ReactNode, index) => (
          <div className="cell" key={`cell${index}`}>
            {content}
          </div>
        ))}
        <style jsx>{`
          .container {
            display: ${isLargeScreen ? 'flex;' : 'block;'};
            margin: ${isLargeScreen ? '-4rem -2rem 0;' : '-4rem 0 0;'};
          }

          .cell {
            width: ${isLargeScreen ? 'calc(50% - 4rem);' : 'auto;'};
            margin: ${isLargeScreen ? '5rem 2rem 0;' : '6rem 0 0;'};
          }
        `}</style>
      </div>
    </Box>
  );
};

export default CellContainer;