import riyalUrl from "@/assets/riyal.png";

interface RiyalProps {
  className?: string;
  size?: string;
}

/**
 * Official new Saudi Riyal currency symbol.
 * Rendered as a CSS mask so it inherits the current text color (currentColor).
 */
export function Riyal({ className = "", size = "0.95em" }: RiyalProps) {
  return (
    <span
      aria-hidden="true"
      className={`inline-block shrink-0 align-[-0.12em] ${className}`}
      style={{
        width: size,
        height: size,
        backgroundColor: "currentColor",
        WebkitMaskImage: `url(${riyalUrl})`,
        maskImage: `url(${riyalUrl})`,
        WebkitMaskRepeat: "no-repeat",
        maskRepeat: "no-repeat",
        WebkitMaskPosition: "center",
        maskPosition: "center",
        WebkitMaskSize: "contain",
        maskSize: "contain",
      }}
    />
  );
}
