"use client";
import React from 'react';
import { useCurrency } from '@/app/contexts/currencyContext';

const Price = ({ amount, className = "" }) => {
  const { selectedCurrency, exchangeRates, isLoading, error, SUPPORTED_CURRENCIES } = useCurrency();
  
  const convertPrice = (priceInINR) => {
    if (!priceInINR || isNaN(priceInINR)) return 0;
    
    if (selectedCurrency === 'INR') return priceInINR;
    
    if (!exchangeRates || isLoading) {
      return priceInINR;
    }
    
    const rate = exchangeRates[selectedCurrency];
    
    if (rate) {
      const convertedPrice = priceInINR * rate;
      return convertedPrice.toFixed(2);
    }
    
    return priceInINR;
  };
  
  const formatPrice = (price) => {
    const symbol = SUPPORTED_CURRENCIES[selectedCurrency]?.symbol || '₹';
    const convertedPrice = convertPrice(price);
    
    if (error && selectedCurrency !== 'INR') {
      return `${symbol} ${convertedPrice} (approx)`;
    }
    
    switch (selectedCurrency) {
      case 'MYR':
        return `${symbol} ${convertedPrice}`;
      case 'NPR':
        return `${symbol} ${convertedPrice}`;
      case 'INR':
      default:
        return `${symbol} ${price}`;
    }
  };
  
  if (isLoading && selectedCurrency !== 'INR') {
    return <span className={className}>Loading price...</span>;
  }
  
  return (
    <span className={className}>
      {formatPrice(amount)}
    </span>
  );
};

export default Price;