import { cn } from "@/lib/utils";

const SRC = `${import.meta.env.BASE_URL}images/festival/christmas/bell.png`;

/**
 * Christmas skin: jingle-bell icon that replaces the min/max volume speakers.
 * `dim` renders the smaller, muted-looking variant used for the min button.
 */
export default function ChristmasBellIcon({
  dim = false,
  className,
}: {
  dim?: boolean;
  className?: string;
}) {
  return (
    <span className="festival-bell-slot" aria-hidden="true">
      <img
        src={SRC}
        alt=""
        draggable={false}
        className={cn(
          "pointer-events-none select-none object-contain",
          dim ? "festival-bell-dim h-5 w-5 opacity-70" : "festival-bell h-7 w-7",
          className,
        )}
      />
    </span>
  );
}