import { InputHTMLAttributes, forwardRef } from 'react';

interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
    onClear?: () => void;
}

const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
    ({ onClear, className = '', value, ...props }, ref) => {
        return (
            <div className="relative">
                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                    <svg
                        className="h-5 w-5 text-gray-400 dark:text-gray-500"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="2"
                        stroke="currentColor"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
                        />
                    </svg>
                </div>
                <input
                    ref={ref}
                    type="search"
                    className={`
                        block w-full rounded-lg border border-gray-300 bg-white px-4 py-3 pl-11 pr-10 text-sm
                        text-gray-900 shadow-sm transition-all duration-200
                        placeholder:text-gray-400
                        focus:border-[#d4af37] focus:outline-none focus:ring-2 focus:ring-[#d4af37]/20 focus:ring-offset-0
                        dark:border-gray-600 dark:bg-gray-800 dark:text-white
                        dark:placeholder:text-gray-500
                        dark:focus:border-[#b8941f] dark:focus:ring-[#b8941f]/20
                        ${className}
                    `}
                    value={value}
                    {...props}
                />
                {value && onClear && (
                    <button
                        type="button"
                        onClick={onClear}
                        className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 transition-colors hover:text-gray-600 dark:hover:text-gray-300"
                    >
                        <svg
                            className="h-5 w-5"
                            fill="none"
                            viewBox="0 0 24 24"
                            strokeWidth="2"
                            stroke="currentColor"
                        >
                            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                )}
            </div>
        );
    }
);

SearchInput.displayName = 'SearchInput';

export default SearchInput;

