interface StatusBadgeProps {
    active: boolean;
    onClick?: () => void;
    activeLabel?: string;
    inactiveLabel?: string;
}

export default function StatusBadge({
    active,
    onClick,
    activeLabel = 'Ativo',
    inactiveLabel = 'Inativo'
}: StatusBadgeProps) {
    const Component = onClick ? 'button' : 'span';

    return (
        <Component
            onClick={onClick}
            className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border transition-all ${active
                    ? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:text-emerald-400 dark:border-emerald-900/30'
                    : 'bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700'
                } ${onClick ? 'cursor-pointer hover:opacity-80' : ''}`}
        >
            <span className={`w-1.5 h-1.5 rounded-full ${active ? 'bg-emerald-500' : 'bg-zinc-400'}`} />
            {active ? activeLabel : inactiveLabel}
        </Component>
    );
}