"use client"

import React from "react"

export const componentMeta = {
  name: "Animated Badge",
  description: "A highly polished, premium pill badge with an elegant light glare that sweeps across the text.",
  props: {
    children: { type: "ReactNode", description: "Badge text" },
  }
}

export default function AnimatedBadge({
  children = "✨ Introducing Oblivion UI",
}: {
  children?: React.ReactNode
}) {
  return (
    <div className="group relative mx-auto flex max-w-fit items-center justify-center gap-2 rounded-full border border-black/10 bg-white/50 px-5 py-2 text-sm transition-all ease-in hover:cursor-pointer hover:bg-neutral-100 dark:border-white/10 dark:bg-zinc-900 dark:hover:bg-zinc-800 shadow-sm backdrop-blur-md">
      
      <style>{`
        @keyframes text-shimmer {
          0% { background-position: 200% 0; }
          100% { background-position: -200% 0; }
        }
        .animate-text-shimmer {
          animation: text-shimmer 2.5s infinite linear;
        }
      `}</style>

      <span className="relative inline-flex items-center gap-2 animate-text-shimmer bg-[linear-gradient(110deg,#a3a3a3,45%,#1d1d1f,55%,#a3a3a3)] dark:bg-[linear-gradient(110deg,#939393,45%,#ffffff,55%,#939393)] bg-[length:200%_100%] bg-clip-text text-transparent font-medium tracking-wide">
        {children}
      </span>
      
    </div>
  )
}