"use client";

import React, { useMemo } from "react";
import { toMoneyNumber } from "@/lib/moneyParse";
import RiyalIcon from "./RiyalIcon";

export default function Money({
  value,
  className,
  iconClassName,
  minimumFractionDigits,
  maximumFractionDigits,
}: {
  value: number | string | null | undefined;
  className?: string;
  iconClassName?: string;
  minimumFractionDigits?: number;
  maximumFractionDigits?: number;
}) {
  const n = useMemo(() => {
    const parsed = toMoneyNumber(value, 0);
    const safe = Number.isFinite(parsed) ? parsed : 0;
    return new Intl.NumberFormat("en-US", {
      minimumFractionDigits,
      maximumFractionDigits,
    }).format(safe);
  }, [value, minimumFractionDigits, maximumFractionDigits]);

  return (
    <span className={className ?? "inline-flex items-center gap-1"}>
      <span>{n}</span>
      <RiyalIcon className={iconClassName ?? "w-4 h-4"} />
    </span>
  );
}