'use client';

import React from 'react';

interface BadgeProps {
    children: React.ReactNode;
    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
    className?: string;
}

export default function Badge({ children, variant = 'default', className = '' }: BadgeProps) {
    const variants = {
        default: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400',
        success: 'bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400',
        warning: 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400',
        error: 'bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400',
        info: 'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400',
    };

    return (
        <span className={`
            px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-widest inline-flex items-center
            ${variants[variant]}
            ${className}
        `}>
            {children}
        </span>
    );
}