"use client";

import { FC } from "react";
import { useRouter } from "next/navigation";
import { List as InternalList, Button } from "ui";
import { type Selectable } from "kysely";
import { type Database } from "bridge-common";
import { serviceConfig } from "../config/config";

type ListProps = {
  service: string;
  rows: Selectable<keyof Database>[];
};

export const List: FC<ListProps> = ({ service, rows }) => {
  const { displayName, entity, listColumns } = serviceConfig[service];
  const title = `${displayName}s`;
  const router = useRouter();

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

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