"use client";

import { useMemo } from "react";

import { DataTable } from "@/components/ui/data-table";
import {
  ROLE_PAGE_SIZE,
  ROLE_ROW_HEIGHT,
} from "@/features/role/components/table/role-table-config";
import { getRoleTableColumns } from "@/features/role/components/table/role-table-columns";
import type { Role } from "@/features/role/role-data";

type RoleTableProps = {
  roles: Role[];
  isLoading: boolean;
  error: string | null;
  onView: (role: Role) => void;
  onEdit: (role: Role) => void;
  onDelete: (role: Role) => void;
};

export function RoleTable({
  roles,
  isLoading,
  error,
  onView,
  onEdit,
  onDelete,
}: RoleTableProps) {
  const columns = useMemo(
    () => getRoleTableColumns({ onView, onEdit, onDelete }),
    [onView, onEdit, onDelete],
  );

  return (
    <DataTable
      fillAvailableHeight
      rows={roles}
      columns={columns}
      getRowId={(row) => row.id}
      loading={isLoading}
      error={error}
      emptyMessage="No roles found."
      pageSize={ROLE_PAGE_SIZE}
      rowHeight={ROLE_ROW_HEIGHT}
    />
  );
}