import type { ReactNode } from 'react';
import { TableSearchInput, type TableSearchInputProps } from '@/components/common/TableSearchInput';
import { cn } from '@/lib/utils';

export interface TableListToolbarProps {
    search: TableSearchInputProps;
    children?: ReactNode;
    className?: string;
    actionsClassName?: string;
    align?: 'center' | 'end';
    searchLabel?: string;
}

export function TableListToolbar({
    search,
    children,
    className,
    actionsClassName,
    align = 'center',
    searchLabel,
}: TableListToolbarProps) {
    const alignClass = align === 'end' ? 'lg:items-end' : 'lg:items-center';

    const searchField = (
        <TableSearchInput
            {...search}
            className={cn(searchLabel ? 'lg:max-w-none' : undefined, search.className)}
        />
    );

    const searchBlock = searchLabel ? (
        <div className="flex w-full flex-col gap-2 lg:max-w-md">
            <label className="text-sm font-medium" htmlFor={search.id}>
                {searchLabel}
            </label>
            {searchField}
        </div>
    ) : (
        searchField
    );

    return (
        <div
            className={cn(
                'flex flex-col gap-3 lg:flex-row lg:justify-between',
                alignClass,
                className,
            )}
        >
            {searchBlock}
            {children ? (
                <div className={cn('flex flex-wrap items-center gap-2', actionsClassName)}>
                    {children}
                </div>
            ) : null}
        </div>
    );
}