import { PropsWithChildren } from 'react';

type Tone = 'published' | 'draft' | 'archived' | 'gold' | 'neutral';

const toneClasses: Record<Tone, string> = {
    published: 'bg-status-published/10 text-status-published',
    draft: 'bg-status-draft/20 text-on-surface-variant',
    archived: 'bg-status-archived/10 text-status-archived',
    gold: 'bg-accent-gold/10 text-accent-gold',
    neutral: 'bg-surface-container-high text-on-surface-variant',
};

export default function Badge({
    tone = 'neutral',
    children,
}: PropsWithChildren<{ tone?: Tone }>) {
    return (
        <span
            className={`text-label-caps inline-flex items-center rounded-full px-3 py-1 ${toneClasses[tone]}`}
        >
            {children}
        </span>
    );
}