"use client";

import { cn } from "@/lib/utils";
import { staticIconUrl } from "@/components/main/BaseUrl";

const BOLD_BASE = "/images/icons/vuesax/bold";

export type BoldIconName = string;

interface BoldIconProps {
  /** Vuesax bold icon file name without path, e.g. "search-normal" or "search-normal.svg" */
  name: BoldIconName;
  size?: number;
  className?: string;
  /** When true, icon uses currentColor (for tinted buttons). Default uses dark fill + optional invert in parent. */
  tinted?: boolean;
}

export function boldIconUrl(name: string): string {
  const file = name.endsWith(".svg") ? name : `${name}.svg`;
  return staticIconUrl(`${BOLD_BASE}/${file}`);
}

export default function BoldIcon({
  name,
  size = 20,
  className,
  tinted = false,
}: BoldIconProps) {
  const url = boldIconUrl(name);

  if (tinted) {
    return (
      <span
        role="img"
        aria-hidden
        className={cn("inline-block shrink-0 bg-current", className)}
        style={{
          width: size,
          height: size,
          WebkitMaskImage: `url(${url})`,
          maskImage: `url(${url})`,
          WebkitMaskRepeat: "no-repeat",
          maskRepeat: "no-repeat",
          WebkitMaskPosition: "center",
          maskPosition: "center",
          WebkitMaskSize: "contain",
          maskSize: "contain",
        }}
      />
    );
  }

  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={url}
      alt=""
      aria-hidden
      width={size}
      height={size}
      className={cn("inline-block shrink-0 dark:invert", className)}
      style={{ width: size, height: size }}
    />
  );
}
