/**
 * Official Saudi Riyal symbol rendered as an inline image.
 *
 * Uses the user-provided PNG under /assets/icons/saudi-riyal.png
 * which shows the official 2020 Saudi Riyal sign. A CSS mask is used
 * so the glyph inherits the surrounding text color via `currentColor`,
 * allowing the symbol to blend with any colored text (green, white,
 * yellow, etc.).
 */
interface SarSymbolProps {
  /** Additional class names (e.g. sizing). */
  className?: string;
  /** Accessible label. Defaults to "SAR". */
  label?: string;
}

export function SarSymbol({ className = "", label = "SAR" }: SarSymbolProps) {
  const maskUrl = "url(/assets/icons/saudi-riyal.png)";
  return (
    <span
      role="img"
      aria-label={label}
      className={
        "inline-block align-[-0.12em] h-[0.9em] w-[0.9em] select-none bg-current " +
        className
      }
      style={{
        WebkitMaskImage: maskUrl,
        maskImage: maskUrl,
        WebkitMaskRepeat: "no-repeat",
        maskRepeat: "no-repeat",
        WebkitMaskPosition: "center",
        maskPosition: "center",
        WebkitMaskSize: "contain",
        maskSize: "contain",
      }}
    />
  );
}

export default SarSymbol;