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

export const FineTunesTable: FC<{ fineTunes: FineTuneJobWithDatasetDto[] }> = ({ fineTunes }) => {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>ID</TableHead>
          <TableHead>Dataset</TableHead>
          <TableHead>Provider</TableHead>
          <TableHead>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>
  );
};
