import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

export type StatusTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';

/**
 * Status badge with the consistent colour convention (05-UI-UX §4). Colour is
 * never the only signal — the label text always carries the meaning. Filled
 * badge with dark text on the coloured fill for dark backgrounds.
 */
const toneClasses: Record<StatusTone, string> = {
    success: 'bg-brand-success/20 text-brand-success border-brand-success/30',
    warning: 'bg-brand-warning/20 text-brand-warning border-brand-warning/30',
    danger: 'bg-brand-danger/20 text-brand-danger border-brand-danger/30',
    info: 'bg-brand-info/20 text-brand-info border-brand-info/30',
    neutral: 'bg-muted text-muted-foreground border-border',
};

export function StatusBadge({
    tone,
    children,
    className,
}: {
    tone: StatusTone;
    children: React.ReactNode;
    className?: string;
}) {
    return (
        <Badge
            variant="outline"
            className={cn('border', toneClasses[tone], className)}
        >
            {children}
        </Badge>
    );
}