import { cn } from "@/lib/utils";
import type { IconKey, Swatch } from "@/shared/appearance";
import { AppIcon } from "./app-icon";

/** Renk anahtarını CSS değişkenine bağlar: --swatch-blue → --swatch (sınıflar bunu kullanır). */
export const swatchStyle = (color: Swatch) =>
  ({ "--swatch": `var(--swatch-${color})` }) as React.CSSProperties;

/** Renkli yuvarlak ikon rozeti (kategori/hesap). */
export function IconBadge({
  icon,
  color,
  className,
  size = "md",
}: {
  icon: IconKey;
  color: Swatch;
  className?: string;
  size?: "sm" | "md";
}) {
  return (
    <span
      style={swatchStyle(color)}
      className={cn(
        "inline-flex shrink-0 items-center justify-center rounded-full bg-(--swatch)/15 text-(--swatch)",
        size === "sm" ? "size-7 [&_svg]:size-3.5" : "size-9 [&_svg]:size-4.5",
        className,
      )}
    >
      <AppIcon name={icon} />
    </span>
  );
}