"use client";

import { Table } from "@tanstack/react-table";
import { Input } from "@/components/ui/input";
import { Search } from "lucide-react";

interface DataTableToolbarProps<TData> {
    table: Table<TData>;
    searchKey?: string;
    onSearch?: (value: string) => void;
}

export function DataTableToolbar<TData>({
    table,
    searchKey,
    onSearch,
}: DataTableToolbarProps<TData>) {
    return (
        <div className="flex items-center justify-between">
            <div className="flex flex-1 items-center space-x-2">
                {searchKey && (
                    <div className="relative w-full max-w-sm">
                        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                        <Input
                            placeholder={`Search ${searchKey}...`}
                            value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ""}
                            onChange={(event) => {
                                const value = event.target.value;
                                table.getColumn(searchKey)?.setFilterValue(value);
                                onSearch?.(value);
                            }}
                            className="pl-10"
                        />
                    </div>
                )}
            </div>
        </div>
    );
}