import { Box, Table } from '@mantine/core'

export default function Datatable({ columns, data, withCheckbox = false }) {
  const renderCols = columns.map((col) => (
    <Table.Th key={col.field} w={col.width}>
      {col.title}
    </Table.Th>
  ))

  const renderRows = data.map((row) => (
    <Table.Tr key={row.id}>
      {columns.map((col) => (
        <Table.Td key={col.field}>
          {col.render ? col.render(row) : row[col.field]}
        </Table.Td>
      ))}
    </Table.Tr>
  ))

  return (
    <Box
      style={(theme) => ({
        border: `1px solid ${theme.colors.gray[3]}`,
        overflow: 'hidden',
        borderRadius: '10px',
      })}
    >
      <Table
        striped
        highlightOnHover
        withColumnBorders
        bg="white"
        verticalSpacing="sm"
      >
        <Table.Thead>
          <Table.Tr>{renderCols}</Table.Tr>
        </Table.Thead>
        <Table.Tbody>{renderRows}</Table.Tbody>
      </Table>
    </Box>
  )
}
