import {DataGrid, type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, useDataGrid} from '@refinedev/mui'
import React from 'react'

export const CountryList = () => {
  const {dataGridProps} = useDataGrid({})

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: 'code',
        headerName: 'Code',
        type: 'string',
        minWidth: 100,
        display: 'flex',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'name',
        headerName: 'Name',
        type: 'string',
        minWidth: 100,
        flex: 1,
      },
      {
        field: 'actions',
        headerName: 'Actions',
        align: 'right',
        headerAlign: 'center',
        minWidth: 100,
        sortable: false,
        display: 'flex',
        renderCell: function render({row}) {
          return (
            <>
              <EditButton hideText recordItemId={row.name} />
              <DeleteButton hideText recordItemId={row.name} />
            </>
          )
        },
      },
    ],
    [],
  )

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} getRowId={(row: any) => row.code} />
    </List>
  )
}