import { FineTuneWithDatasetDto } from "~/browser-client";
import { FC } from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
import { usePaidGuard } from "~/hooks";
import { FineTuneCell } from "~/pages/finetuning/FineTuneCell";

export const FineTunesTable: FC<{ fineTunes: FineTuneWithDatasetDto[] }> = ({ fineTunes }) => {
  const { isBasicPlan } = usePaidGuard();

  return isBasicPlan ? (
    <div className={"text-center"}>
      <p>Upgrade to Pro to create fine-tuned models.</p>
    </div>
  ) : (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Dataset</TableHead>
          <TableHead>Base Model</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Started</TableHead>
          <TableHead>Ended</TableHead>
          <TableHead>Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {fineTunes.length ? (
          fineTunes.map((finetune) => <FineTuneCell key={finetune.id} finetune={finetune} />)
        ) : (
          <TableRow>
            <TableCell colSpan={8} className="h-24 text-center">
              No fine-tunes
            </TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
};
