"use client";

import { FC } from "react";
import { GridColDef } from "@mui/x-data-grid-pro";
import { useRouter } from "next/navigation";
import { List as InternalList, Button } from "ui";
import type { Selectable } from "kysely";
import { Database } from "@/app/_lib/database";

interface ListProps {
  title: string;
  entity: string;
  rows: Selectable<keyof Database>[];
  columns: GridColDef<any>[];
}

export const List: FC<ListProps> = ({ title, entity, rows, columns }) => {
  const router = useRouter();

  const onRowClick = (id: string) => {
    router.push(`/${entity}/${id}`);
  };

  return (
    <InternalList
      title={title}
      rows={rows}
      columns={columns}
      onRowClick={onRowClick}
      buttons={
        <Button text="Create" kind="primary" href={`/${entity}/create`} />
      }
    />
  );
};