import type { Table } from '@tanstack/react-table';
import type { ReactNode } from 'react';
import { DataTableViewOptions } from '@/components/data-table/data-table-view-options';
import { Input } from '@/components/ui/input';

type DataTableToolbarProps<TData> = {
    table: Table<TData>;
    search: string;
    onSearchChange: (value: string) => void;
    searchPlaceholder?: string;
    disableSearch?: boolean;
    toolbarLeft?: ReactNode;
    toolbarRight?: ReactNode;
};

export function DataTableToolbar<TData>({
    table,
    search,
    onSearchChange,
    searchPlaceholder = 'Rechercher…',
    disableSearch = false,
    toolbarLeft,
    toolbarRight,
}: DataTableToolbarProps<TData>) {
    return (
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex flex-1 flex-wrap items-center gap-2">
                {!disableSearch && (
                    <Input
                        value={search}
                        onChange={(event) => onSearchChange(event.target.value)}
                        placeholder={searchPlaceholder}
                        className="max-w-sm"
                    />
                )}
                {toolbarLeft}
            </div>
            <div className="flex items-center gap-2">
                {toolbarRight}
                <DataTableViewOptions table={table} />
            </div>
        </div>
    );
}