"use client";

import { flexRender, Table } from "@tanstack/react-table";
import { TableClassNames } from "../../../types/table.types";

interface TableBodyProps<TData extends object> {
  table: Table<TData>;
  classNames?: Pick<
    TableClassNames,
    "tableTbody" | "tableTbodyRow" | "tableTbodyCell"
  >;
}

const mergeClasses = (...classes: Array<string | undefined>) =>
  classes.filter(Boolean).join(" ");

export function TableBody<TData extends object>({
  table,
  classNames,
}: TableBodyProps<TData>) {
  return (
    <tbody className={classNames?.tableTbody}>
      {table.getRowModel().rows.map((row) => (
        <tr
          key={row.id}
          className={mergeClasses(
            classNames?.tableTbodyRow,
            row.getIsSelected() ? "bg-link-1/10" : "",
          )}
        >
          {row.getVisibleCells().map((cell) => (
            <td
              key={cell.id}
              className={mergeClasses(
                "align-middle",
                classNames?.tableTbodyCell,
                "",
              )}
            >
              {flexRender(cell.column.columnDef.cell, cell.getContext())}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  );
}
