'use client';

import type { Plan } from '@/types/subscription';

const STYLES: Record<Plan, string> = {
  free: 'text-white/40 bg-white/[0.05] border-white/[0.08]',
  pro: 'text-sky-300 bg-sky-500/[0.08] border-sky-500/[0.16]',
  pro_plus: 'text-violet-300 bg-violet-500/[0.08] border-violet-500/[0.16]',
  business: 'text-amber-300 bg-amber-500/[0.08] border-amber-500/[0.16]',
  enterprise: 'text-emerald-300 bg-emerald-500/[0.08] border-emerald-500/[0.16]',
};

const LABELS: Record<Plan, string> = {
  free: 'Free',
  pro: 'Pro',
  pro_plus: 'Pro+',
  business: 'Business',
  enterprise: 'Enterprise',
};

export function PlanBadge({ plan, className = '' }: { plan: Plan; className?: string }) {
  return (
    <span className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11px] font-bold uppercase tracking-wide ${STYLES[plan]} ${className}`}>
      {LABELS[plan]}
    </span>
  );
}