"use client"

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

export const componentMeta = {
  name: "Glow Input",
  description: "A beautiful text input that features an animated flowing gradient border when focused.",
  props: {}
}

/**
 * Oblivion — GlowInput
 * Border mechanic: background-position animation on an oversized linear-gradient.
 * Replaces the Magic UI inset-[-1000%] + conic-gradient approach with a wrapper-padding
 * technique — the wrapper IS the border, the input sits inside padded by 1px.
 * All color values reference --ob-* design tokens from globals.css.
 */
export default function GlowInput({
  className
}: {
  className?: string
}) {
  const [isFocused, setIsFocused] = useState(false)

  return (
    <div
      className={cn(
        "relative w-full max-w-sm mx-auto rounded-[11px] p-px transition-all duration-300",
        isFocused
          ? "ob-glow-border shadow-[0_0_16px_var(--ob-glow-sm)]"
          : "bg-black/10 dark:bg-white/10"
      )}
    >
      <input
        type="email"
        placeholder="Enter your email"
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        className={cn(
          "relative flex h-12 w-full rounded-[10px]",
          "bg-white dark:bg-[var(--ob-surface-0)]",
          "px-4 py-2 text-sm",
          "text-neutral-900 dark:text-white",
          "placeholder:text-neutral-400 dark:placeholder:text-neutral-500",
          "focus:outline-none transition-colors",
          className
        )}
      />
    </div>
  )
}