import { Badge } from "@/components/ui/badge"

interface TierBadgeProps {
  tier: "Free" | "Pro" | "AI Coach"
}

export function TierBadge({ tier }: TierBadgeProps) {
  if (tier === "Free") {
    return <Badge variant="outline" className="text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-secondary/30">Free</Badge>
  }
  
  if (tier === "Pro") {
    return <Badge className="text-xs font-semibold uppercase tracking-wider bg-primary/10 text-primary border-primary/20 hover:bg-primary/20 transition-colors">Pro</Badge>
  }
  
  return (
    <Badge className="text-xs font-semibold uppercase tracking-wider bg-cyan-500/10 text-[var(--cyan)] dark:text-cyan-400 border-cyan-500/20 hover:bg-cyan-500/20 transition-colors shadow-none dark:shadow-[0_0_10px_-2px_var(--cyan-ai)]">
      AI Coach
    </Badge>
  )
}