import { SlidersHorizontal } from 'lucide-react';
import { TableListToolbar } from '@/components/common/TableListToolbar';
import { Button } from '@/components/ui/button';

type DataTableToolbarProps = {
    searchValue: string;
    onSearchValueChange: (value: string) => void;
    onSearchSubmit: () => void;
    searchPlaceholder: string;
    searchSubmitLabel?: string;
    filtersCount: number;
    filtersButtonLabel: string;
    clearFiltersLabel: string;
    onOpenFilters: () => void;
    onClearAll: () => void;
    canClear: boolean;
    actions?: React.ReactNode;
};

export function DataTableToolbar({
    searchValue,
    onSearchValueChange,
    onSearchSubmit,
    searchPlaceholder,
    searchSubmitLabel,
    filtersCount,
    filtersButtonLabel,
    clearFiltersLabel,
    onOpenFilters,
    onClearAll,
    canClear,
    actions,
}: DataTableToolbarProps) {
    return (
        <TableListToolbar
            search={{
                value: searchValue,
                onChange: onSearchValueChange,
                onSubmit: onSearchSubmit,
                placeholder: searchPlaceholder,
                submitLabel: searchSubmitLabel,
            }}
        >
            <Button type="button" variant="outline" onClick={onOpenFilters}>
                <SlidersHorizontal className="mr-2 h-4 w-4" />
                {filtersButtonLabel}
                {filtersCount > 0 ? ` (${filtersCount})` : ''}
            </Button>

            {canClear ? (
                <Button type="button" variant="ghost" onClick={onClearAll}>
                    {clearFiltersLabel}
                </Button>
            ) : null}

            {actions}
        </TableListToolbar>
    );
}