import { Shield } from "lucide-react"

interface VerifiedBadgeProps {
  size?: "sm" | "md" | "lg"
  className?: string
}

export function VerifiedBadge({ size = "md", className = "" }: VerifiedBadgeProps) {
  const sizes = {
    sm: "w-4 h-4",
    md: "w-5 h-5",
    lg: "w-6 h-6",
  }

  return (
    <div className={`relative inline-flex ${className}`}>
      {/* Animated gradient background */}
      <div
        className={`${sizes[size]} rounded-full bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 p-[1.5px] animate-pulse`}
        style={{ animationDuration: "3s" }}
      >
        <div className="w-full h-full rounded-full bg-zinc-900 flex items-center justify-center">
          <Shield
            className="w-[60%] h-[60%] text-transparent bg-gradient-to-br from-blue-400 via-purple-400 to-pink-400 bg-clip-text"
            fill="url(#badge-gradient)"
          />
        </div>
      </div>

      {/* SVG gradient definition */}
      <svg width="0" height="0" className="absolute">
        <defs>
          <linearGradient id="badge-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#60a5fa" />
            <stop offset="50%" stopColor="#a855f7" />
            <stop offset="100%" stopColor="#ec4899" />
          </linearGradient>
        </defs>
      </svg>

      {/* Glow effect */}
      <div
        className={`absolute inset-0 ${sizes[size]} rounded-full bg-gradient-to-br from-blue-400/20 via-purple-500/20 to-pink-500/20 blur-sm -z-10`}
      />
    </div>
  )
}
