import type { DiningTableCategory } from "@/lib/api/dining-table-categories";
import { MaterialIcon } from "../icons/nav-icons";
import { ActionIconButton } from "../ui/button";

type KategoriMejaTableProps = {
  items: DiningTableCategory[];
  startIndex: number;
  onEdit: (item: DiningTableCategory) => void;
  onDelete: (item: DiningTableCategory) => void;
};

export function KategoriMejaTable({
  items,
  startIndex,
  onEdit,
  onDelete,
}: KategoriMejaTableProps) {
  return (
    <table className="min-w-[640px] w-full border-collapse">
        <thead>
          <tr className="overflow-hidden rounded-md">
            <th className="text-m-medium w-10 bg-neutral-20 px-3 py-2 text-center text-neutral-100">
              #
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Nama Kategori
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Keterangan
            </th>
            <th className="text-m-medium bg-neutral-20 px-3 py-2 text-left text-neutral-100">
              Total Meja
            </th>
            <th className="w-[84px] bg-neutral-20" />
          </tr>
        </thead>
        <tbody>
          {items.length === 0 ? (
            <tr>
              <td
                colSpan={5}
                className="text-m-regular px-3 py-8 text-center text-neutral-80"
              >
                Belum ada data kategori meja.
              </td>
            </tr>
          ) : (
            items.map((item, index) => (
              <tr key={item.id} className="border-b border-neutral-20 last:border-0">
                <td className="text-m-regular px-3 py-2 text-center text-neutral-100">
                  {startIndex + index + 1}
                </td>
                <td className="text-m-regular px-3 py-2 text-neutral-100">
                  {item.name}
                </td>
                <td className="text-m-regular px-3 py-2 text-neutral-100">
                  {item.description}
                </td>
                <td className="text-m-regular px-3 py-2 text-neutral-100">
                  {item.totalTable}
                </td>
                <td className="px-3 py-2">
                  <div className="flex items-center justify-center gap-1">
                    <ActionIconButton
                      variant="danger"
                      onClick={() => onDelete(item)}
                      aria-label={`Hapus kategori ${item.name}`}
                      icon={<MaterialIcon name="delete" size={16} />}
                    />
                    <ActionIconButton
                      onClick={() => onEdit(item)}
                      aria-label={`Edit kategori ${item.name}`}
                      icon={<MaterialIcon name="edit" size={16} />}
                    />
                  </div>
                </td>
              </tr>
            ))
          )}
        </tbody>
    </table>
  );
}