import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

export const AnimatedDropdown = ({ label, options, onSelect }: { label: string; options: string[]; onSelect: (value: string) => void }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="relative w-64">
      <button onClick={() => setIsOpen(!isOpen)} className="w-full px-4 py-2 bg-gray-200 rounded">
        {label}
      </button>
      <AnimatePresence>
        {isOpen && (
          <motion.ul
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            className="absolute left-0 right-0 mt-2 bg-white shadow-lg rounded z-10"
          >
            {options.map((option) => (
              <li key={option} onClick={() => { onSelect(option); setIsOpen(false); }} className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
                {option}
              </li>
            ))}
          </motion.ul>
        )}
      </AnimatePresence>
    </div>
  );
};