// Create a new component for currency conversion explanation
import React from 'react';
import { Info } from 'lucide-react';
import { useCurrency } from '@/app/contexts/currencyContext';

const CurrencyTooltip = () => {
  const { selectedCurrency, SUPPORTED_CURRENCIES } = useCurrency();
  
  // Only show for non-INR currencies
  if (selectedCurrency === 'INR') return null;
  
  return (
    <div className="relative inline-block group ml-2">
      <Info className="w-4 h-4 text-gray-400 cursor-help" />
      <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-white border rounded shadow-lg 
                     text-xs text-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50">
        Prices are converted from Indian Rupees (₹) to {SUPPORTED_CURRENCIES[selectedCurrency]?.name} 
        ({SUPPORTED_CURRENCIES[selectedCurrency]?.symbol}) based on current exchange rates. 
        Actual charges may vary at checkout.
      </div>
    </div>
  );
};

export default CurrencyTooltip;