"use client"

import React from "react"
import { cn } from "@/lib/utils"

export const componentMeta = {
  name: "Glowing Button",
  description: "A breathtaking button with an endlessly flowing liquid gradient border.",
  props: {
    children: { type: "ReactNode", description: "Button text" }
  }
}

/**
 * Oblivion — GlowingButton
 * Border mechanic: background-position animation on an oversized linear-gradient.
 * This is structurally distinct from conic-gradient / inset-[-1000%] approaches.
 * All color values reference --ob-* design tokens defined in globals.css.
 */
export default function GlowingButton({
  children = "Deploy to Oblivion",
  className = ""
}: {
  children?: React.ReactNode
  className?: string
}) {
  return (
    <button
      className={cn(
        "group relative inline-flex h-12 items-center justify-center rounded-full p-px focus:outline-none",
        "hover:scale-[1.03] active:scale-[0.97] transition-transform duration-200",
        className
      )}
    >
      {/* The animated gradient border — ob-glow-border class drives it via globals.css */}
      <span
        className="ob-glow-border absolute inset-0 rounded-full"
        style={{
          padding: "1.5px",
          filter: `drop-shadow(0 0 10px var(--ob-glow))`,
        }}
        aria-hidden="true"
      />

      {/* Inner capsule */}
      <span
        className={cn(
          "relative inline-flex h-full w-full items-center justify-center rounded-full",
          "bg-white dark:bg-[var(--ob-surface-0)]",
          "px-8 py-1 text-sm font-semibold tracking-wide",
          "text-neutral-900 dark:text-white backdrop-blur-3xl",
          "transition-colors hover:bg-neutral-50 dark:hover:bg-[var(--ob-surface-1)]",
          "border border-transparent"
        )}
        style={{ margin: "1.5px" }}
      >
        {children}
      </span>
    </button>
  )
}