'use client'
import { cn } from '@/lib/utils'
import { CampaignType } from '@/lib/types'
import { Trophy, Gift, Ticket, Percent } from 'lucide-react'

const cfg: Record<CampaignType, { label: string; icon: typeof Trophy; color: string; bg: string }> = {
  leaderboard: { label: 'Leaderboard', icon: Trophy, color: 'text-brand-yellow', bg: 'bg-brand-yellow/10' },
  gift: { label: 'Gift', icon: Gift, color: 'text-brand-turquoise', bg: 'bg-brand-turquoise/10' },
  raffle: { label: 'Raffle', icon: Ticket, color: 'text-[#a78bfa]', bg: 'bg-[#a78bfa]/10' },
  rebate: { label: 'Rebate', icon: Percent, color: 'text-trading-up', bg: 'bg-trading-up/10' },
}

export function CampaignBadge({ type }: { type: CampaignType }) {
  const c = cfg[type]; const Icon = c.icon
  return (
    <div className={cn('inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md', c.bg)}>
      <Icon className={cn('w-3.5 h-3.5', c.color)} />
      <span className={cn('text-caption font-semibold', c.color)}>{c.label}</span>
    </div>
  )
}