import { Crown, ShieldCheck, BadgeCheck } from 'lucide-react';
import { useTranslation } from '@/contexts/language';
import { cn } from '@/lib/utils';

type Role = 'owner' | 'admin' | 'organiser' | 'verifiedOwner';

const CONFIG: Record<Role, { key: string; cls: string; Icon: typeof Crown }> = {
  owner: { key: 'owner', cls: 'border-[#ccff00]/40 bg-[#ccff00]/10 text-[#ccff00]', Icon: Crown },
  admin: { key: 'admin', cls: 'border-purple-400/40 bg-purple-400/10 text-purple-300', Icon: ShieldCheck },
  organiser: { key: 'organiser', cls: 'border-blue-400/40 bg-blue-400/10 text-blue-300', Icon: ShieldCheck },
  verifiedOwner: { key: 'verifiedOwner', cls: 'border-[#ccff00]/40 bg-[#ccff00]/10 text-[#ccff00]', Icon: BadgeCheck },
};

/**
 * A small badge showing the viewer's control over the entity on screen
 * (`owner`/`admin`/`organiser`) or a verified-ownership signal (`verifiedOwner`).
 * Deliberately only rendered when it applies — no empty chrome.
 */
export function ControllerBadge({ role, className }: { role: Role; className?: string }) {
  const { t } = useTranslation();
  const { key, cls, Icon } = CONFIG[role];
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-black uppercase tracking-wide',
        cls,
        className,
      )}
    >
      <Icon className="h-3 w-3" />
      {t(`role.${key}`)}
    </span>
  );
}