"use client";

import * as React from "react";
import { DataTable } from "@/components/data-table/data-table";
import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
import { vendorInputMaterialsColumns } from "./columns";
import { useDataTable } from "@/hooks/use-data-table";
import { VendorPossibleMaterial } from "../vendor-possible-material-service";

interface VendorInputMaterialsTableProps {
  vendorId: number;
  data: VendorPossibleMaterial[];
  pageCount: number;
}

export function VendorInputMaterialsTable({
  vendorId,
  data,
  pageCount,
}: VendorInputMaterialsTableProps) {
  const { table } = useDataTable({
    data,
    columns: vendorInputMaterialsColumns,
    pageCount,
    filterFields: [
      {
        id: "itemCode",
        label: "자재그룹",
        placeholder: "자재그룹 검색...",
      },
      {
        id: "itemName", 
        label: "자재그룹명",
        placeholder: "자재그룹명 검색...",
      },
    ],
  });

  return (
    <div className="space-y-4">
      <h3 className="text-lg font-semibold">업체입력정보</h3>
      
      <DataTable table={table}>
        <DataTableToolbar 
          table={table} 
          filterFields={[
            {
              id: "itemCode",
              label: "자재그룹",
              placeholder: "자재그룹 검색...",
            },
            {
              id: "itemName", 
              label: "자재그룹명",
              placeholder: "자재그룹명 검색...",
            },
          ]}
        >
          {/* 컬럼 선택 기능 제거 - DataTableViewOptions 없음 */}
        </DataTableToolbar>
      </DataTable>
    </div>
  );
}