'use client';

import { Search, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useState } from 'react';

interface SearchBarProps {
  onSearch: (query: string, semantic: boolean) => void;
  isLoading: boolean;
}

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

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch(query, isSemantic);
  };

  return (
    <form onSubmit={handleSubmit} className="w-full max-w-3xl mx-auto">
      <div className="relative group flex items-center bg-zinc-900/80 rounded-2xl border border-zinc-800 focus-within:border-indigo-500/50 focus-within:ring-2 focus-within:ring-indigo-500/20 shadow-2xl transition-all duration-300">
        <div className="pl-6 flex-1 flex items-center">
          <Search className="text-zinc-500 mr-3" size={20} />
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder={isSemantic ? "Describe the concept or event you're looking for..." : "Search headlines, text, or keywords..."}
            className="w-full bg-transparent py-5 text-zinc-100 placeholder-zinc-500 focus:outline-none text-lg"
          />
        </div>
        
        <div className="pr-4 pl-4 flex items-center gap-3 border-l border-zinc-800">
          <button
            type="button"
            onClick={() => setIsSemantic(!isSemantic)}
            className={cn(
              "flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-300",
              isSemantic 
                ? "bg-indigo-500/10 text-indigo-400 border border-indigo-500/20" 
                : "text-zinc-500 hover:text-zinc-300 border border-transparent"
            )}
          >
            <Sparkles size={16} className={isSemantic ? "animate-pulse" : ""} />
            Semantic AI
          </button>
          
          <button
            type="submit"
            disabled={isLoading || !query.trim()}
            className="bg-zinc-100 text-zinc-900 px-6 py-2.5 rounded-xl font-semibold hover:bg-white active:scale-95 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {isLoading ? 'Searching...' : 'Search'}
          </button>
        </div>
      </div>
    </form>
  );
}
