interface StatusPillProps {
    text: string;
    variant?: 'active' | 'success' | 'info';
}

const dotColors: Record<string, string> = {
    active: 'bg-[#68f349]',
    success: 'bg-[#68f349]',
    info: 'bg-white/50',
};

export function StatusPill({ text, variant = 'info' }: StatusPillProps) {
    return (
        <div className="flex w-full max-w-full items-start gap-2 rounded-lg border border-white/[0.1] bg-white/[0.03] px-3 py-1.5">
            <span className={`mt-1.5 size-[7px] shrink-0 rounded-full ${dotColors[variant]}`} />
            <span className="min-w-0 flex-1 text-xs leading-snug text-white break-words">{text}</span>
        </div>
    );
}