import { ComponentType } from "react";
import { LucideProps } from "lucide-react";
import { cn } from "@/lib/cn";

// SquareIcon is the rounded-square icon tile used by dialog-style surfaces
// (ConfirmDialog, etc.). Renders a bordered tile with the provided lucide
// icon centered inside. The `variant` selects the semantic colour scheme — all
// variants keep the neutral dark tile + border; only the icon colour changes
// to match the action's severity.
export type SquareIconVariant = "default" | "info" | "warning" | "danger";

const variantClass: Record<SquareIconVariant, string> = {
    default: "text-white",
    info: "text-sky-400",
    warning: "text-netbird",
    danger: "text-red-500",
};

type SquareIconProps = {
    icon: ComponentType<LucideProps>;
    iconSize?: number;
    variant?: SquareIconVariant;
    className?: string;
};

export const SquareIcon = ({
    icon: Icon,
    iconSize = 18,
    variant = "default",
    className,
}: SquareIconProps) => (
    <div
        className={cn(
            "h-11 w-11 rounded-lg flex items-center justify-center border bg-nb-gray-920 border-nb-gray-900",
            variantClass[variant],
            className,
        )}
    >
        <Icon size={iconSize} />
    </div>
);
