"use client";
 
import React, { useRef, useEffect, CSSProperties } from "react";
import { cn } from "@/lib/utils";
 
interface BorderBeamProps {
  children?: React.ReactNode;
  lightWidth?: number;
  duration?: number;
  lightColor?: string;
  className?: string;
  [key: string]: any;
}
 
export default function BorderBeam({
  children,
  lightWidth = 200,
  duration = 10,
  lightColor = "#FAFAFA",
  className,
  ...props
}: BorderBeamProps) {
  const pathRef = useRef<HTMLDivElement>(null);
 
  const updatePath = () => {
    if (pathRef.current) {
      const div = pathRef.current;
      div.style.setProperty(
        "--path",
        `path("M 0 0 H ${div.offsetWidth} V ${div.offsetHeight} H 0 V 0")`
      );
    }
  };
 
  useEffect(() => {
    updatePath();
    window.addEventListener("resize", updatePath);
 
    return () => {
      window.removeEventListener("resize", updatePath);
    };
  }, []);
 
  return (
    <div
      style={{
        "--duration": duration,
        "--light-width": `${lightWidth}px`,
        "--light-color": lightColor,
        isolation: "isolate",
      } as CSSProperties}
      ref={pathRef}
      className={cn(
        "absolute rounded-[inherit] z-0 w-full h-full overflow-hidden after:content-[''] after:absolute after:inset-[2px] dark:after:bg-black after:bg-white after:rounded-[inherit]",
        "before:absolute before:inset-0 before:rounded-[inherit] before:border-2 before:border-black/5 dark:before:border-white/20",
        className
      )}
      {...props}
    >
      <div
        className="absolute aspect-square inset-0 animate-border-beam bg-[radial-gradient(ellipse_at_center,var(--light-color),transparent,transparent)]"
        style={{
          offsetPath: "var(--path)",
          offsetDistance: "0%",
          width: "var(--light-width)",
        }}
      />
    </div>
  );
}