import { useTranslations } from 'next-intl';
import { Globe, Layers, Store, Tag } from 'lucide-react';

import { cn } from '@/lib/utils';
import type { PromotionScope } from '@/types/api';

const SCOPE_META: Record<PromotionScope, { icon: typeof Globe; classes: string }> = {
  global: { icon: Globe, classes: 'bg-primary-50 text-primary-700 border-primary-200' },
  category: { icon: Layers, classes: 'bg-accent-50 text-accent-700 border-accent-200' },
  vendor: { icon: Store, classes: 'bg-emerald-50 text-emerald-700 border-emerald-200' },
  service: { icon: Tag, classes: 'bg-amber-50 text-amber-700 border-amber-200' },
};

/** Feature 054 — US11. Renders a coloured scope chip for an active promotion. */
export function OfferScopeBadge({ scope, className }: { scope: PromotionScope; className?: string }) {
  const t = useTranslations('offers.card.scope');
  const meta = SCOPE_META[scope];
  const Icon = meta.icon;

  return (
    <span
      className={cn(
        'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium',
        meta.classes,
        className,
      )}
    >
      <Icon aria-hidden="true" className="h-3 w-3" />
      {t(scope)}
    </span>
  );
}