import { Search, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';

/*
 * SFR-02 공통컴포넌트: 검색 입력
 */

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

export function SearchInput({ value, onChange, placeholder, className = '' }: SearchInputProps) {
  const { t } = useTranslation('common');
  const effectivePlaceholder = placeholder ?? `${t('action.search')}...`;
  return (
    <div className={`relative ${className}`}>
      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-hint" />
      <input
        type="text"
        aria-label={effectivePlaceholder}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={effectivePlaceholder}
        className="w-full bg-surface-overlay border border-slate-700/50 rounded-lg pl-9 pr-8 py-2 text-[11px] text-label placeholder:text-hint focus:outline-none focus:border-blue-500/50"
      />
      {value && (
        <button
          type="button"
          aria-label={t('aria.clearSearch')}
          onClick={() => onChange('')}
          className="absolute right-2.5 top-1/2 -translate-y-1/2 text-hint hover:text-muted-foreground"
        >
          <X className="w-3 h-3" />
        </button>
      )}
    </div>
  );
}