import { Input, TextField } from '@heroui/react';
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';

interface SearchInputProps {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
}

export function SearchInput({ value, onChange, placeholder = 'Cari...' }: SearchInputProps) {
    return (
        <TextField value={value} onChange={onChange} className="relative min-w-0 flex-1 max-w-xs">
            <MagnifyingGlassIcon className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none z-10" />
            <Input
                placeholder={placeholder}
                className="h-10 w-full rounded-full border-0 bg-white pl-11 pr-4 text-sm shadow-sm outline-none focus:ring-2 focus:ring-sky-500/30"
            />
        </TextField>
    );
}