"use client";

import useTenderListPresenter from "./useTenderListPresenter";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import { TendersSkeleton } from "./Skeleton";
const TendersTable = () => {
  const { allTenders, isPending } = useTenderListPresenter();
  if (isPending) return <TendersSkeleton />;
  return (
    <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
      <Table>
        <TableHeader>
          <TableRow className="border-none uppercase [&>th]:text-start">
            <TableHead colSpan={100} className="text-start font-extrabold">
              Title
            </TableHead>
            <TableHead colSpan={100} className="text-start font-extrabold">
              Country Code
            </TableHead>
            <TableHead colSpan={100} className="text-start font-extrabold">
              Status
            </TableHead>
          </TableRow>
        </TableHeader>

        <TableBody>
          {allTenders.map((item, index) =>
            !item ? (
              <h6 key={index}>No tenders were found</h6>
            ) : (
              <TableRow
                key={item.id}
                className="odd:bg-gray-2 dark:odd:bg-gray-7"
              >
                <TableCell className="text-start" colSpan={100}>
                  {item.title}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item.country_code}
                </TableCell>
                <TableCell className="text-start" colSpan={100}>
                  {item.status}
                </TableCell>
              </TableRow>
            ),
          )}
        </TableBody>
      </Table>
    </div>
  );
};

export default TendersTable;