"use client";

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

export const BackgroundLines = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return (
    <div className={cn(
      "h-[20rem] md:h-screen w-full bg-white dark:bg-black relative",
      className
    )}>
      {/* Simple animated lines using CSS */}
      <div className="absolute inset-0 w-full h-full">
        <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-500 to-transparent animate-pulse" />
        <div className="absolute top-20 left-0 w-full h-px bg-gradient-to-r from-transparent via-purple-500 to-transparent animate-pulse delay-1000" />
        <div className="absolute top-40 left-0 w-full h-px bg-gradient-to-r from-transparent via-green-500 to-transparent animate-pulse delay-2000" />
        <div className="absolute top-60 left-0 w-full h-px bg-gradient-to-r from-transparent via-yellow-500 to-transparent animate-pulse delay-3000" />
        <div className="absolute top-80 left-0 w-full h-px bg-gradient-to-r from-transparent via-red-500 to-transparent animate-pulse delay-1000" />
      </div>
      {children}
    </div>
  );
};