'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

const HeroSearch = () => {
  const router = useRouter();
  const [query, setQuery] = useState('');

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && query.trim()) {
      router.push(`/comparison?q=${encodeURIComponent(query)}`);
    }
  };

  return (
    <div className="w-full max-w-3xl px-2 sm:px-0 mb-6 sm:mb-8">
      <div className="relative flex items-center">
        <span className="material-symbols-outlined text-white/60 absolute left-4 text-xl md:text-2xl">
          search
        </span>
        <input
          type="text"
          id="global-search"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="প্রার্থী, দল, বা আসন খুঁজুন..."
          className="w-full bg-white/10 backdrop-blur-md text-white placeholder-blue-200 outline-none py-3 md:py-4 pl-14 pr-28 sm:pr-36 rounded-xl text-sm md:text-lg"
        />
        <Link
          href={query.trim() ? `/comparison?q=${encodeURIComponent(query)}` : '#'}
          className={`absolute right-2 bg-white text-blue-900 px-3 sm:px-4 py-2 md:py-2.5 rounded-lg font-bold text-sm md:text-base hover:bg-blue-50 transition flex items-center gap-1.5 ${
            !query.trim() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
          }`}
        >
          <span className="material-symbols-outlined text-base md:text-lg">search</span>
          <span className="hidden sm:inline">খুঁজুন</span>
          <span className="sm:hidden">খুঁজুন</span>
        </Link>
      </div>
    </div>
  );
};

export default HeroSearch;