import React from "react";
import { SarSymbol } from "./SarSymbol";
import { formatAmount } from "@/lib/currency";

/**
 * Render a price with the official Saudi Riyal SVG symbol followed by the
 * numeric amount with two decimals.
 *
 * This is the preferred way to render any price across the storefront,
 * cart, checkout, receipts and admin views.
 *
 * @example
 *   <Price amount={199.5} />           // ﷼ 199.50
 *   <Price amount={0} />               // ﷼ 0.00
 *   <Price amount={250} className="text-xl font-bold" />
 */
interface PriceProps {
  /** Numeric amount in Saudi Riyal. */
  amount: number | null | undefined;
  /** Optional extra classes applied to the wrapping span. */
  className?: string;
  /** Optional extra classes applied to the inner SVG symbol. */
  symbolClassName?: string;
}

export function Price({
  amount,
  className = "",
  symbolClassName = "",
}: PriceProps) {
  return (
    <span className={"inline-flex items-baseline gap-1 " + className}>
      <SarSymbol className={symbolClassName} />
      <span>{formatAmount(amount)}</span>
    </span>
  );
}

export default Price;