import type { LucideIcon } from 'lucide-react';
import { Building2, CalendarDays, Globe, Landmark, MessageCircle, Phone, Share2 } from 'lucide-react';
import { cn } from '../../lib/cn';
import type { Channel } from '../../types';

export interface ChannelBadgeProps {
  /** @default "Web" */
  channel?: Channel;
  /** @default "md" */
  size?: 'sm' | 'md';
  className?: string;
}

const CH: Record<Channel, { wrap: string; Icon: LucideIcon }> = {
  WhatsApp: { wrap: 'bg-emerald-100 text-emerald-700', Icon: MessageCircle },
  Web: { wrap: 'bg-sky-100 text-sky-700', Icon: Globe },
  Referral: { wrap: 'bg-sunrise-100 text-sunrise-600', Icon: Share2 },
  Agency: { wrap: 'bg-slate-100 text-navy-700', Icon: Building2 },
  Bancassurance: { wrap: 'bg-slate-100 text-slate-700', Icon: Landmark },
  Direct: { wrap: 'bg-slate-100 text-slate-600', Icon: Phone },
  Event: { wrap: 'bg-amber-100 text-amber-700', Icon: CalendarDays },
};

/** Acquisition channel badge with glyph + color. */
export function ChannelBadge({ channel = 'Web', size = 'md', className }: ChannelBadgeProps) {
  const c = CH[channel];
  const sm = size === 'sm';
  return (
    <span
      className={cn(
        'inline-flex items-center gap-1.5 rounded-pill font-sans font-semibold leading-none whitespace-nowrap',
        sm ? 'text-2xs px-[9px] py-1' : 'text-xs px-[11px] py-[5px]',
        c.wrap,
        className,
      )}
    >
      <c.Icon size={sm ? 11 : 13} />
      {channel}
    </span>
  );
}