/**
 * <PlanBadge> — badge do plano no rodapé da sidebar.
 *
 * Não existe no Efferd: é um componente próprio.
 * Cor por tier: Essencial cinza · Retail Pro laranja · Multi-loja branco.
 */

function PlanBadge({ plano }) {
  const tiers = {
    essencial: {
      nome: 'Essencial',
      classes: 'border-border text-muted-foreground',
      marcaClasses: 'bg-muted-foreground',
    },
    retail_pro: {
      nome: 'Retail Pro',
      classes: 'border-primary/40 text-primary',
      marcaClasses: 'bg-primary',
    },
    multi_loja: {
      nome: 'Multi-loja',
      classes: 'border-foreground/30 text-foreground',
      marcaClasses: 'bg-foreground',
    },
  };

  const tier = tiers[plano] || {
    nome: plano || 'Sem plano',
    classes: 'border-[--border] text-muted-foreground',
    marcaClasses: 'bg-muted-foreground',
  };

  return (
    <div className={`ns-plano flex items-center gap-2 border px-3 py-2 ${tier.classes}`}>
      <span className={`block h-2 w-2 ${tier.marcaClasses}`} aria-hidden="true" />
      <span className="text-[0.6875rem] uppercase tracking-[0.14em]">{tier.nome}</span>
    </div>
  );
}