"use client";

import React, { useState, useCallback } from "react";
import { DataTable } from "@/components/ui/data-table"; 
import { EntityDetailSheet } from "@/components/dashboard/data-view/EntityDetailSheet";
import { CategoriesOverview } from "./columns";

interface CategoriesTableProps {
  columns: any[];
  data: any[];
}

export function CategoriesTable({ columns, data }: CategoriesTableProps) {
  const [selectedCategory, setSelectedCategory] = useState<CategoriesOverview | null>(null);

  const handleRowClick = useCallback((row: CategoriesOverview) => {
    setSelectedCategory(row);
  }, []);

  return (
    <>
      <DataTable
        columns={columns}
        data={data}
        onRowClick={handleRowClick}
      />
      <EntityDetailSheet
        type="generic"
        data={selectedCategory}
        open={!!selectedCategory}
        onOpenChange={(open) => !open && setSelectedCategory(null)}
      />
    </>
  );
}