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

export default function SearchUI() {
  const [searchValue, setSearchValue] = useState('');
  const [showSuggestions, setShowSuggestions] = useState(false);

  // Sample suggestions data - you can replace with dynamic data
const allSuggestions = [
  'Bride profiles',
  'Groom profiles',
  'Hindu matrimony',
  'Christian matrimony',
  'Muslim matrimony',
  'Tamil bride',
  'Tamil groom',
  'Telugu matrimony',
  'Kannada matrimony',
  'Malayalam matrimony',
  'Marathi matrimony',
  'North Indian bride',
  'Caste based search',
  'Community matches',
  'Horoscope matching',
  'Verified profiles',
  'Premium matches',
  'Divorced / Widowed profiles',
  'NRI matrimony',
  'Professional matches',
  'Doctor groom',
  'Engineer bride',
  'IT professional matches',
  'Age based search',
  'Height based search',
  'Education based matches',
  'Location based matches',
  'Same mother tongue profiles',
  'Partner preference search',
  'Wedding matchmaking',
];


  // Filter suggestions based on search value
  const filteredSuggestions = searchValue.trim()
    ? allSuggestions.filter(suggestion =>
        suggestion.toLowerCase().includes(searchValue.toLowerCase())
      )
    : [];

  const handleSuggestionClick = (suggestion) => {
    setSearchValue(suggestion);
    setShowSuggestions(false);
  };

  const handleSearch = () => {
    console.log('Searching for:', searchValue);
    setShowSuggestions(false);
  };

  return (
    <div className="flex items-center justify-center px-2 py-9">
      <div className="w-full max-w-4xl">
        {/* Search Container */}
        <div className="relative">
          {/* Shadow/Glow Effect */}
          <div className="absolute -inset-1 bg-green-200/20 rounded-full blur-sm"></div>
          
          {/* Main Search Bar */}
          <div className="md:w-[100%] md:m-w-[400px] relative 
          flex items-center justify-between
          bg-white md:rounded-full shadow-sm md:overflow-hidden border-1 border-green-600">
            {/* Search Input */}
            <input
              type="text"
              value={searchValue}
              onChange={(e) => {
                setSearchValue(e.target.value);
                setShowSuggestions(true);
              }}
              onFocus={() => setShowSuggestions(true)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') {
                  handleSearch();
                }
              }}
              placeholder="Search"
              className="md:flex-1 md:px-8 px-2 py-2 text-lg text-gray-700 placeholder-red-600 bg-transparent outline-none font-medium"
            />
            
            {/* Search Button */}
            <button 
              onClick={handleSearch}
              className="bg-green-600 hover:bg-green-700 transition-colors px-8 py-3 flex items-center justify-center min-w-[80px]"
              aria-label="Search"
            >
              <Search className="w-7 h-7 text-white" strokeWidth={2.5} />
            </button>
          </div>

          {/* Suggestions Dropdown */}
          {showSuggestions && filteredSuggestions.length > 0 && (
            <div className="z-99 absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden z-10 max-h-80 overflow-y-auto">
              {filteredSuggestions.map((suggestion, index) => (
                <button
                  key={index}
                  onClick={() => handleSuggestionClick(suggestion)}
                  className="w-full text-left px-8 py-4 hover:bg-indigo-50 transition-colors flex items-center gap-3 border-b border-gray-100 last:border-b-0"
                >
                  <Search className="w-5 h-5 text-gray-400" />
                  <span className="text-gray-700 font-medium">{suggestion}</span>
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Click outside to close suggestions */}
        {showSuggestions && (
          <div
            className="fixed inset-0 -z-10"
            onClick={() => setShowSuggestions(false)}
          />
        )}
      </div>
    </div>
  );
}