import React from "react";
import {LucideIcon} from "lucide-react";

type IconButtonVariant = 'primary' | 'danger' | 'ghost' | 'muted' | 'light';
type IconButtonSize = 'sm' | 'md' | 'lg';
type IconButtonShape = 'circle' | 'square';

interface IconButtonProps {
    icon: LucideIcon;
    variant?: IconButtonVariant;
    size?: IconButtonSize;
    shape?: IconButtonShape;
    onClick?: () => void | Promise<void>;
    disabled?: boolean;
    selected?: boolean;
    tooltip?: string;
}

const variantClasses: Record<IconButtonVariant, string> = {
    primary: 'text-muted hover:text-primary hover:bg-primary/10',
    danger: 'text-muted hover:text-error hover:bg-error/10',
    ghost: 'text-text-secondary hover:text-text-primary hover:bg-secondary',
    muted: 'bg-secondary hover:bg-gray-dark text-text-secondary hover:text-text-primary',
    light: 'text-text-primary/80 hover:text-text-primary hover:bg-text-primary/10',
};

const sizeClasses: Record<IconButtonSize, { button: string; icon: string }> = {
    sm: {button: 'p-1.5', icon: 'w-4 h-4'},
    md: {button: 'p-2', icon: 'w-5 h-5'},
    lg: {button: 'p-2', icon: 'w-6 h-6'},
};

const shapeClasses: Record<IconButtonShape, string> = {
    circle: 'rounded-full',
    square: 'rounded-lg',
};

export default function IconButton(
    {
        icon: Icon,
        variant = 'ghost',
        size = 'md',
        shape = 'square',
        onClick,
        disabled = false,
        selected = false,
        tooltip,
    }: IconButtonProps) {
    const sizeConfig = sizeClasses[size];
    const selectedClass: string = selected ? 'bg-secondary text-primary' : '';

    return (
        <button
            onClick={onClick}
            disabled={disabled}
            title={tooltip}
            className={`
                flex items-center justify-center
                transition-all duration-200
                ${shapeClasses[shape]}
                ${selected ? selectedClass : variantClasses[variant]}
                ${sizeConfig.button}
                ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
            `}
        >
            <Icon className={sizeConfig.icon} strokeWidth={2.25}/>
        </button>
    );
}