'use client';

import React from 'react';

interface PriceDisplayProps {
  amount: number;
  className?: string;
  currency?: string;
  showCurrency?: boolean;
  iconClassName?: string;
}

const formatter = new Intl.NumberFormat('en-AE', {
  style: 'decimal',
  minimumFractionDigits: 0,
  maximumFractionDigits: 2,
});

export default function PriceDisplay({
  amount,
  className = 'text-zinc-900 dark:text-zinc-100',
  currency = 'AED',
  showCurrency = true,
}: PriceDisplayProps) {
  const formattedAmount = formatter.format(amount);

  return (
    <span
      className={`inline-flex items-baseline ${className}`}
      aria-label={`${currency} ${amount}`}
    >
      {showCurrency && (
        <span className="text-[0.75em] font-bold mr-1 rtl:mr-0 rtl:ml-1 opacity-90 select-none">
          {currency}
        </span>
      )}
      <span>{formattedAmount}</span>
    </span>
  );
}

export { PriceDisplay };