import { Box, Card, Center, SimpleGrid } from '@mantine/core'

export default function GridList({ columns, data }) {
  return (
    <SimpleGrid
      cols={{ base: 1, sm: 2, lg: 4 }}
      pb="md"
      styles={{
        root: {
          borderBottom: '1px solid var(--mantine-color-default-border)',
        },
      }}
    >
      {data.map((row) => (
        <Card key={row.id} shadow="md" radius="lg" withBorder>
          {columns.map((col) => {
            if (col.field === 'icon') {
              return (
                <Card.Section key={col.field} p="lg">
                  <Center>{col.render(row, true)}</Center>
                </Card.Section>
              )
            }
            if (col.field === 'action') {
              return (
                <Card.Section key={col.field} withBorder inheritPadding py="xs">
                  {col.render(row, true)}
                </Card.Section>
              )
            }
            return (
              <Box key={col.field} mb="md">
                {col.render(row, true)}
              </Box>
            )
          })}
        </Card>
      ))}
    </SimpleGrid>
  )
}
