import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { motion } from 'framer-motion';

interface SearchDropdownProps {
    searchFocused: boolean;
    searchQuery: string;
    recentSearches: string[];
    setSearchQuery: (query: string) => void;
}

export function SearchDropdown({
    searchFocused,
    searchQuery,
    recentSearches,
    setSearchQuery
}: SearchDropdownProps) {
    if (!searchFocused) return null;

    return (
        <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.2 }}
            className="absolute top-12 left-4 right-4 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden"
        >
            <div className="p-3">
                <h3 className="text-xs font-medium text-tertiary-300 mb-2">Recent Searches</h3>
                <div className="space-y-1">
                    {recentSearches.map((search, index) => (
                        <motion.button
                            key={index}
                            whileHover={{ x: 4 }}
                            className="flex items-center gap-2 w-full p-2 rounded-lg hover:bg-gray-100 text-left"
                            onClick={() => setSearchQuery(search)}
                        >
                            <MagnifyingGlassIcon className="h-4 w-4 text-tertiary-300" />
                            <span className="text-sm text-gray-700">{search}</span>
                        </motion.button>
                    ))}
                </div>
            </div>
            {searchQuery && (
                <div className="border-t border-gray-100 p-3">
                    <motion.button
                        whileHover={{ x: 4 }}
                        className="flex items-center gap-2 w-full p-2 rounded-lg hover:bg-gray-100"
                    >
                        <MagnifyingGlassIcon className="h-4 w-4 text-blue-500" />
                        <span className="text-sm text-blue-500">
                            Search for "{searchQuery}"
                        </span>
                    </motion.button>
                </div>
            )}
        </motion.div>
    );
}