"use client";

import { useCurrency } from "@/hooks/useCurrency";
import { formatPrice } from "@/lib/geo";

interface PriceDisplayProps {
  amount: number;
  className?: string;
  showCurrency?: boolean;
  size?: "sm" | "md" | "lg" | "xl";
}

export default function PriceDisplay({
  amount,
  className = "",
  showCurrency = true,
  size = "md",
}: PriceDisplayProps) {
  const { currency, loading } = useCurrency();

  const sizeClasses = {
    sm: "text-sm",
    md: "text-base",
    lg: "text-lg",
    xl: "text-xl",
  };

  if (loading) {
    return (
      <span className={`${sizeClasses[size]} ${className} animate-pulse`}>
        {amount.toLocaleString()} ...
      </span>
    );
  }

  return (
    <span className={`${sizeClasses[size]} ${className}`}>
      {showCurrency ? formatPrice(amount, currency) : amount.toLocaleString()}
    </span>
  );
}