import type { TouristPersona } from '@/types/lead';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

interface PersonaBadgeProps {
  persona: TouristPersona;
  showDescription?: boolean;
  className?: string;
}

const SPEND_COLORS = {
  low: 'bg-muted text-muted-foreground',
  medium: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
  high: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
  very_high: 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300',
};

export function PersonaBadge({ persona, showDescription = false, className }: PersonaBadgeProps) {
  return (
    <div className={cn('inline-flex flex-col gap-1', className)}>
      <Badge className={cn('inline-flex items-center gap-1.5', SPEND_COLORS[persona.spend_potential])}>
        <span>{persona.emoji}</span>
        <span>{persona.label}</span>
      </Badge>
      {showDescription && (
        <p className="text-xs text-muted-foreground">{persona.description}</p>
      )}
    </div>
  );
}
