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

const CurrencySelect = ({ selectedCurrency, setSelectedCurrency, SUPPORTED_CURRENCIES }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="relative w-32">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg shadow-sm 
        flex items-center justify-between text-gray-700 text-sm font-medium
        hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 
        transition-all duration-200 group"
      >
        {SUPPORTED_CURRENCIES[selectedCurrency]?.country}
        <ChevronDown 
          className={`w-4 h-4 text-gray-400 transition-transform duration-200 
          ${isOpen ? 'rotate-180' : ''} group-hover:text-gray-600`}
        />
      </button>

      {isOpen && (
        <div 
          className="absolute w-full mt-2 bg-white border border-gray-200 rounded-lg shadow-lg 
          overflow-hidden z-50 animate-in fade-in slide-in-from-top-2 duration-200"
        >
          <div className="max-h-60 overflow-auto scrollbar-thin scrollbar-thumb-gray-200 hover:scrollbar-thumb-gray-300">
            {Object.entries(SUPPORTED_CURRENCIES).map(([code, { country }]) => (
              <button
                key={code}
                onClick={() => {
                  setSelectedCurrency(code);
                  setIsOpen(false);
                }}
                className={`w-full px-4 py-2.5 text-left text-sm transition-colors duration-150
                hover:bg-gray-50 focus:outline-none focus:bg-gray-50
                ${selectedCurrency === code ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-700'}
                ${selectedCurrency === code ? 'hover:bg-blue-50' : 'hover:bg-gray-50'}`}
              >
                {country}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default CurrencySelect;