import { Search } from 'lucide-react';
import { useState } from 'react';

interface SearchBarProps {
  onSearch?: (query: string) => void;
}

export default function SearchBar({ onSearch }: SearchBarProps) {
  const [query, setQuery] = useState('');

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    if (onSearch) {
      onSearch(query);
    }
  };

  return (
    <form onSubmit={handleSearch} className="w-full relative flex items-center">
      <input
        type="text"
        placeholder="¿Qué estás buscando? (Ej: Departamento, Fiat 600...)"
        className="w-full py-4 pl-8 pr-16 rounded-[1.8rem] bg-slate-900/40 border-none text-white text-lg focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all placeholder:text-slate-500 font-medium"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <button
        type="submit"
        className="absolute right-2 w-12 h-12 bg-blue-600 text-white rounded-full hover:bg-blue-500 transition-all flex items-center justify-center shadow-lg shadow-blue-600/20 active:scale-90"
      >
        <Search size={20} strokeWidth={3} />
      </button>
    </form>
  );
}