import React from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import Button from '@mui/material/Button'
import IconButton from '@mui/material/IconButton'
import { DataGrid } from '@mui/x-data-grid'
import Tooltip from '@mui/material/Tooltip'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

interface CommonTableProps {
  title: string
  data: any[]
  columns: any[]
  onAdd: () => void
  onEdit: (row: any) => void
  onDelete: (row: any) => void
  loading?: boolean
}

const CommonTable = ({ title, data, columns, onAdd, onEdit, onDelete, loading }: CommonTableProps) => {
  // Add action column
  const columnsWithActions = [
    ...columns,
    {
      field: 'actions',
      headerName: 'Action',
      flex: 0.15,
      minWidth: 120,
      sortable: false,
      renderCell: ({ row }: any) => (
        <Box>
          <Tooltip title='Edit'>
            <IconButton size='small' onClick={() => onEdit(row)} sx={{ mr: 1 }}>
              <Icon icon='tabler:edit' fontSize={20} />
            </IconButton>
          </Tooltip>
          <Tooltip title='Delete'>
            <IconButton size='small' onClick={() => onDelete(row)} color='error'>
              <Icon icon='tabler:trash' fontSize={20} />
            </IconButton>
          </Tooltip>
        </Box>
      )
    }
  ]

  return (
    <Card>
      <CardHeader
        title={title}
        action={
          <Button variant='contained' startIcon={<Icon icon='tabler:plus' />} onClick={onAdd}>
            Add
          </Button>
        }
      />
      <Box sx={{ p: 5, pt: 0 }}>
        <DataGrid
          autoHeight
          rows={data}
          columns={columnsWithActions}
          pageSize={5}
          rowsPerPageOptions={[5, 10, 25]}
          disableSelectionOnClick
          loading={loading}
          getRowId={(row) => row.id}
          sx={{
            '& .MuiDataGrid-columnHeaders': {
              backgroundColor: 'action.hover',
              fontWeight: 600
            }
          }}
        />
      </Box>
    </Card>
  )
}

export default CommonTable