'use client';

import React from 'react';
import { Coins } from 'lucide-react';
import { formatCoins } from '../lib/coins';

type Props = {
  amount: number | string | null | undefined;
  className?: string;
  /** Show "coins" word after the number (default true for prose; false in dense UI with icon) */
  suffix?: boolean;
  icon?: boolean;
  iconClassName?: string;
};

export function CoinAmount({
  amount,
  className = '',
  suffix = false,
  icon = true,
  iconClassName = 'h-3.5 w-3.5',
}: Props) {
  const text = formatCoins(amount, { suffix: !!suffix });
  return (
    <span className={`inline-flex items-center gap-1 tabular-nums ${className}`}>
      {icon && <Coins className={`shrink-0 text-amber-500 ${iconClassName}`} aria-hidden />}
      <span>{text}</span>
      {!suffix && <span className="sr-only">coins</span>}
    </span>
  );
}