'use client';

import { cn } from '@djangocfg/ui-core/lib';

interface StatusTagProps {
    code: string;
}

/** HTTP status pill. Colours map to the usual conventions: 2xx green,
 *  3xx blue, 4xx amber, 5xx red, non-numeric (``default``) neutral.
 *  Codes that don't parse as integers render in the neutral style so we
 *  never flash a wrong-severity colour at the user. */
export function StatusTag({ code }: StatusTagProps) {
    const numeric = Number.parseInt(code, 10);
    const cls = !Number.isFinite(numeric)
        ? 'bg-muted text-muted-foreground border-border'
        : numeric >= 500
            ? 'bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/25'
            : numeric >= 400
                ? 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/25'
                : numeric >= 300
                    ? 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25'
                    : 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25';
    return (
        <span className={cn(
            'inline-flex items-center justify-center rounded border px-2 py-0.5 font-mono text-[11px] font-bold leading-none shrink-0 tabular-nums',
            cls,
        )}>
            {code}
        </span>
    );
}
