/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import { Group } from '@/app/lib/definitions';
import TableOfContents from '../components/table-of-contents';
import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
import { destroyGroup } from '@/app/api/groups';

export default function GroupsTable({ groups, onUpdate, onEdit }: {
  groups: Group[],
  onUpdate: () => void,
  onEdit: (group: Group) => void,
}) {

  return (
    <TableOfContents
      headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions']}
      caption='Groups'
      elements={groups}
      rowRender={(group) => (
        <tr key={group.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            {group.name}
          </td>
          <td className="px-6">
            <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div>
          </td>
          <td className="px-6 text-lg">
            {group.attendance?.confirmed}
          </td>
          <td className="px-6 text-sm">
            {group.attendance?.tentative}
          </td>
          <td className="px-6 text-sm">
            {group.attendance?.invited}
          </td>
          <td className="px-6 text-sm">
            {group.attendance?.declined}
          </td>
          <td className="px-6 text-sm">
            {group.attendance?.considered}
          </td>
          <td className="px-6 text-sm">
            {group.attendance?.total}
          </td>
          <td>
            <div className="flex flex-row items-center">
              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGroup(group, () => onUpdate()) }} />
              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
            </div>
          </td>
        </tr>
      )}
    />
  )
}