"use client";

import React from "react";
import { cn } from "../shared/utils";

export const BackgroundBeamsWithCollision = React.forwardRef<HTMLDivElement, {
  children: React.ReactNode;
  className?: string;
}>(({ children, className }, ref) => {
  return (
    <div
      ref={ref}
      className={cn(
        "h-96 md:h-[40rem] bg-gradient-to-b from-white to-neutral-100 dark:from-neutral-950 dark:to-neutral-800 relative flex items-center w-full justify-center overflow-hidden",
        className
      )}
    >
      {/* Simple animated beams using CSS */}
      <div className="absolute left-0 top-20 m-auto h-14 w-px rounded-full bg-gradient-to-t from-indigo-500 via-purple-500 to-transparent animate-pulse" />
      <div className="absolute left-20 top-20 m-auto h-20 w-px rounded-full bg-gradient-to-t from-blue-500 via-cyan-500 to-transparent animate-pulse delay-1000" />
      <div className="absolute left-40 top-20 m-auto h-12 w-px rounded-full bg-gradient-to-t from-green-500 via-emerald-500 to-transparent animate-pulse delay-2000" />
      <div className="absolute left-60 top-20 m-auto h-16 w-px rounded-full bg-gradient-to-t from-yellow-500 via-orange-500 to-transparent animate-pulse delay-3000" />
      <div className="absolute left-80 top-20 m-auto h-18 w-px rounded-full bg-gradient-to-t from-red-500 via-pink-500 to-transparent animate-pulse delay-1000" />
      
      {children}
      
      <div className="absolute bottom-0 bg-neutral-100 w-full inset-x-0 pointer-events-none" />
    </div>
  );
});

BackgroundBeamsWithCollision.displayName = 'BackgroundBeamsWithCollision';