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

const InvitesTable: FunctionComponent<{ invites: ANY[]; onDelete?: ANY; onSortBy?: ANY }> = ({
  invites,
  onDelete,
  onSortBy,
}) => (
  <Table onSortBy={onSortBy}>
    <thead>
      <tr>
        <Th sort='id'>ID</Th>
        <Th sort>Email</Th>
        <Th sort>Token</Th>
        <Th>Roles</Th>
        <Th sort>Created At</Th>
        <Th>Created By</Th>
        <Th sort>Consumed At</Th>
        <Th>Consumed By</Th>
        <th />
      </tr>
    </thead>
    <tbody>
      {invites?.length ? (
        invites.map((invite) => (
          <tr key={invite.id}>
            <td>{invite.id}</td>
            <td>{invite.email}</td>
            <td>{invite.token}</td>
            <td>{invite.roles.map((role: ANY) => role.name).join(', ')}</td>
            <td>{invite.createdAt}</td>
            <td>{invite.createdBy?.email}</td>
            <td>{invite.consumedAt}</td>
            <td>{invite.consumedBy?.email}</td>
            <Td buttons>
              <Button size='small' icon='delete' color='red' onClick={() => onDelete(invite.id)}>
                Delete
              </Button>
            </Td>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan={8}>No invites found</td>
        </tr>
      )}
    </tbody>
  </Table>
)

export default InvitesTable