import {defaultIconSize} from "./SvgIcon";
import type {LucideIcon} from "lucide-react";
import {ButtonType} from "./BasicButtonDefinitions.ts";
import clsx from "clsx";

type CircularIconButtonProps = {
    icon: LucideIcon;
    onClick: () => void;
    disabled?: boolean;
    className?: string;
};

/**
 * Circular button component
 */
export default function CircularIconButton({
                                               onClick,
                                               icon: Icon,
                                               className = "",
                                               disabled = false,
                                               ...props
                                           }: CircularIconButtonProps) {
    return (
        <button
            className={clsx(
                "flex-shrink-0 w-7 h-7 rounded-full text-white flex items-center justify-center shadow-sm",
                ButtonType.PrimaryButton.backgroundColor,
                className)}
            onClick={onClick}
            disabled={disabled}
            {...props}
        >
            {Icon && (
                <Icon
                    size={defaultIconSize}
                />
            )}
        </button>
    );
}