"use client"

import { cn } from "@/lib/utils"
import { useTheme } from "next-themes"
import { ReactNode } from "react"

interface GlowingBorderWrapperProps {
  children: ReactNode
  className?: string
  animate?: boolean
  colors?: string[]
  size?: "default" | "large"
}

export function GlowingBorderWrapper({
  children,
  className,
  animate = true,
  colors = [],
  size = "default"
}: GlowingBorderWrapperProps) {
  const { theme } = useTheme()

  const gradientColors = colors.length
    ? colors.join(", ")
    : theme === "dark"
      ? "rgba(255,255,255,0.2), rgba(255,255,255,0.05)"
      : "rgba(0,0,0,0.1), rgba(0,0,0,0.03)"

  const padding = size === "large" ? "p-[6px]" : "p-[2px]"
  const roundedOuter = size === "large" ? "rounded-xl" : "rounded-lg"
  const roundedInner = size === "large" ? "rounded-lg" : "rounded-md"

  return (
    <div
      className={cn(
        "relative",
        padding,
        roundedOuter,
        animate && "animate-glow",
        className
      )}
      style={{
        background: `linear-gradient(135deg, ${gradientColors})`,
      }}
    >
      <div className={cn("overflow-hidden", roundedInner)}>{children}</div>
    </div>
  )
}