import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"

interface EnvironmentBadgeProps {
  environment: 'sandbox' | 'production'
  className?: string
}

export function EnvironmentBadge({ environment, className }: EnvironmentBadgeProps) {
  const isSandbox = environment === 'sandbox'
  
  return (
    <Badge
      variant={isSandbox ? "secondary" : "default"}
      className={cn(
        "text-xs font-semibold",
        isSandbox 
          ? "bg-yellow-100 text-yellow-800 border-yellow-300 hover:bg-yellow-200" 
          : "bg-green-100 text-green-800 border-green-300 hover:bg-green-200",
        className
      )}
    >
      {isSandbox ? "🧪 Sandbox" : "✅ Production"}
    </Badge>
  )
}