import { motion } from "framer-motion";

const PremiumBadge = ({ text }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      className="relative group inline-flex items-center justify-center p-[1px] overflow-hidden rounded-full mb-6"
    >
      <motion.div
        animate={{ rotate: [0, 360] }}
        transition={{ duration: 4, repeat: Infinity, ease: "linear" }}
        style={{
          background: `conic-gradient(from 0deg, 
            transparent 20%, 
            hsl(var(--accent-neon)) 50%, 
            transparent 80%)`,
        }}
        className="absolute inset-[-200%] aspect-square opacity-70 group-hover:opacity-100 transition-opacity"
      />

      {/* 2. Inner Glass Container */}
      <div className="relative z-10 px-4 py-1 rounded-full bg-background/90 backdrop-blur-2xl flex items-center gap-2.5 border border-white/10">
        {/* The Leading "Status" Indicator */}
        <div className="relative flex h-2 w-2">
          <div className="absolute inset-0 rounded-full bg-[hsl(var(--accent-neon))] animate-ping opacity-40" />
          <div className="relative rounded-full h-2 w-2 bg-[hsl(var(--accent-neon))] shadow-[0_0_8px_hsl(var(--accent-neon-glow))]" />
        </div>

        {/* Text with Dynamic Themed Gradient */}
        <span className="text-xs font-semibold uppercase tracking-widest  transition-colors text-[hsl(var(--accent-neon-glow))]">
          {text}
        </span>
      </div>
    </motion.div>
  );
};

export default PremiumBadge;
