import React from 'react';

const STATUS = {
    en_attente: { label: 'En attente', bg: '#FEF3C7', text: '#B45309', border: '#FDE68A', dot: '#F59E0B' },
    en_cours: { label: 'En cours', bg: '#E0F2FE', text: '#0369A1', border: '#BAE6FD', dot: '#0EA5E9' },
    cloture: { label: 'Clôturé', bg: '#D1FAE5', text: '#047857', border: '#A7F3D0', dot: '#10B981' },
};

export default function StatusBadge({ status, size = 'md' }) {
    const s = STATUS[status] || STATUS.en_attente;
    const sizeClasses = size === 'sm' ? 'text-xs px-2 py-0.5' : 'text-xs px-2.5 py-1';
    return (
        <span
            data-testid={`status-${status}`}
            className={`inline-flex items-center gap-1.5 rounded-full border font-semibold uppercase tracking-wider ${sizeClasses}`}
            style={{ backgroundColor: s.bg, color: s.text, borderColor: s.border }}
        >
            <span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: s.dot }} />
            {s.label}
        </span>
    );
}

export { STATUS };
