import { Box, SxProps } from '@mui/material'
import React from 'react'
export default function CardsGrid({
  cardWidth,
  gap,
  children,
  sx,
}: {
  cardWidth: number
  gap: number
  children: React.ReactNode
  sx?: SxProps
}) {
  return (
    <Box
      sx={{
        width: '100%',
        display: 'grid',
        gridTemplateColumns: `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`,
        alignItems: 'start',
        gap: `${gap}px`,
        ...sx,
      }}
    >
      {children}
    </Box>
  )
}
