import React from 'react';

const TIERS = [
    { min: 0,  max: 4,  label: 'Tier 0-1 — Elite Standing',        color: '#28a745', bg: '#d4edda' },
    { min: 5,  max: 9,  label: 'Tier 1 — Realignment',             color: '#856404', bg: '#fff3cd' },
    { min: 10, max: 14, label: 'Tier 2 — Administrative Lockdown',  color: '#d9534f', bg: '#f8d7da' },
    { min: 15, max: 19, label: 'Tier 3 — Verification',             color: '#d9534f', bg: '#f8d7da' },
    { min: 20, max: 24, label: 'Tier 4 — Risk Mitigation',          color: '#721c24', bg: '#f5c6cb' },
    { min: 25, max: 29, label: 'Tier 5 — Final Decision',           color: '#721c24', bg: '#f5c6cb' },
    { min: 30, max: 999,label: 'Tier 6 — Separation',               color: '#fff',    bg: '#721c24' },
];

export function getTier(points) {
    return TIERS.find(t => points >= t.min && points <= t.max) || TIERS[0];
}

export function getNextTier(points) {
    const idx = TIERS.findIndex(t => points >= t.min && points <= t.max);
    return idx >= 0 && idx < TIERS.length - 1 ? TIERS[idx + 1] : null;
}

export default function CpasBadge({ points }) {
    const tier = getTier(points);
    return (
        <span style={{
            display: 'inline-block',
            padding: '4px 10px',
            borderRadius: '12px',
            fontSize: '12px',
            fontWeight: 700,
            color: tier.color,
            background: tier.bg,
            border: `1px solid ${tier.color}`,
        }}>
            {points} pts — {tier.label}
        </span>
    );
}