import React from 'react';
import { transitions } from '@/lib/animations';
import { Search, X } from 'lucide-react';
import Input from '@/components/ui/Input.tsx';

interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  containerClassName?: string;
  showClearButton?: boolean;
  onClear?: () => void;
}

const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
  ({ className, containerClassName, id, name, value, showClearButton, onClear, ...props }, ref) => {
    const inputId = id || 'search-input';
    const inputName = name || 'search-input';
    const hasValue = value && String(value).length > 0;

    return (
      <div className={`relative w-full ${containerClassName}`}>
        <Search className="-translate-y-1/2 absolute h-4 left-3 pointer-events-none text-current text-muted-foreground top-1/2 w-4 z-10" />
        <Input
          ref={ref}
          type="search"
          id={inputId}
          name={inputName}
          value={value}
          className={`
            bg-background border-border/50 focus:border-primary/50
            pl-9 pr-9 w-full ${transitions.normal}
            placeholder:text-muted-foreground/70
            hover:border-border focus:ring-2 focus:ring-primary/10
            ${className}
          `}
          {...props}
        />
        {showClearButton && hasValue && onClear && (
          <button
            type="button"
            onClick={onClear}
            className={`absolute right-3 top-1/2 -translate-y-1/2 ${transitions.fast} z-10`}
            aria-label="Clear search"
          >
            <X className="h-4 text-current w-4" />
          </button>
        )}
      </div>
    );
  }
);

SearchInput.displayName = 'SearchInput';

export default SearchInput;