"use client";

import type { CSSProperties } from "react";
import type { LucideIcon } from "lucide-react";
import type { CanvasToolbarItemConfig } from "@/lib/canvas-toolbar-config";
import { cn } from "@/lib/utils";

type CanvasToolbarIconProps = {
  item?: CanvasToolbarItemConfig | null;
  iconUrl?: string | null;
  fallback: LucideIcon;
  className?: string;
  style?: CSSProperties;
  active?: boolean;
};

export function CanvasToolbarIcon({
  item,
  iconUrl,
  fallback: FallbackIcon,
  className,
  style,
  active = false,
}: CanvasToolbarIconProps) {
  const resolvedIconUrl = String(iconUrl || item?.iconUrl || "").trim();

  if (resolvedIconUrl) {
    return (
      <img
        alt=""
        aria-hidden="true"
        className={cn(
          "object-contain",
          active ? "brightness-0 invert opacity-95" : "brightness-0 opacity-80 dark:invert",
          className
        )}
        src={resolvedIconUrl}
        style={style}
      />
    );
  }

  return <FallbackIcon className={className} style={style} />;
}