import React from 'react';
import clsx from 'clsx';

interface BadgeProps {
    children: React.ReactNode;

    // variants
    variant?: 'filled' | 'outline';

    // colors
    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark';

    // styles
    rounded?: boolean;
    radius?: string;
    className?: string;

    // interaction
    onClick?: () => void;   // ✅ added
}

const Badge = ({
    children,
    variant = 'filled',
    color = 'primary',
    rounded = false,
    radius,
    className,
    onClick, // ✅ added
}: BadgeProps) => {
    const base = 'px-2 py-1 text-xs font-medium inline-flex items-center';

    const filled = `bg-${color} text-${color}`;
    const outline = `border border-${color} text-${color} bg-transparent`;

    return (
        <span
            onClick={onClick} // ✅ attach click
            className={clsx(
                base,
                variant === 'filled' ? filled : outline,
                rounded && 'rounded-full',
                radius,
                onClick && 'cursor-pointer', // ✅ show pointer only if clickable
                className
            )}
        >
            {children}
        </span>
    );
};

export default Badge;