import { h, type FunctionComponent } from 'preact'
import Button from './button.tsx'
import { Table, Td, Th } from './table.tsx'

const RolesTable: FunctionComponent<{ roles?: ANY[]; onDelete?: ANY; onEdit?: ANY; onSortBy?: ANY }> = ({
  roles,
  onDelete,
  onEdit,
  onSortBy,
}) => (
  <Table onSortBy={onSortBy}>
    <thead>
      <tr>
        <Th sort='id'>ID</Th>
        <Th sort>Name</Th>
        <Th sort>Created At</Th>
        <th>Created By</th>
        <th />
      </tr>
    </thead>
    <tbody>
      {roles?.length ? (
        roles.map((role) => (
          <tr key={role.id}>
            <td>{role.id}</td>
            <td>{role.name}</td>
            <td>{role.createdAt}</td>
            <td>{role.createdBy?.email}</td>
            <Td buttons>
              <Button size='small' icon='edit' onClick={() => onEdit(role.id)}>
                Edit
              </Button>{' '}
              <Button size='small' icon='delete' color='red' onClick={() => onDelete(role.id)}>
                Delete
              </Button>
            </Td>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan={5}>No roles found</td>
        </tr>
      )}
    </tbody>
  </Table>
)

export default RolesTable