import { useQuery } from "@/api/useQuery";
import TableBody from "@greatness/components/src/table/TableBody";
import TableHeader from "@greatness/components/src/table/TableHead";
import TableRow from "@greatness/components/src/table/TableRow";
import TableWrapper from "@greatness/components/src/table/TableWrapper";

export default function SupplementsTable() {
  const { data } = useQuery<{ id: string; name: string; description: string }[]>({
    queryKey: "/supplement/get-all",
  });
  return (
    <div className="flex flex-col gap-xl">
      <h1>Supplements</h1>
      <TableWrapper>
        <TableHeader>
          <TableRow>
            <div>Name</div>
            <div>Description</div>
          </TableRow>
        </TableHeader>
        <TableBody>
          {data?.map((supplement) => (
            <TableRow key={supplement.id}>
              <div>{supplement.name}</div>
              <div>{supplement.description}</div>
            </TableRow>
          ))}
        </TableBody>
      </TableWrapper>
    </div>
  );
}
