"use client"

import React, { ReactNode } from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

interface InfinityGridProps {
    children?: ReactNode;
    className?: string;
}

function InfinityGrid({
    children,
    className
}: InfinityGridProps) {
    
    const squareSize = 50;
    const dotRadius = 2;
    const strokeWidth = 1;

    const animationTransition = {
        duration: 1.5,
        repeat: Infinity,
        ease: "linear",
        repeatType: "loop",
    } as const;

    return (
        <div className={cn("relative", className)}>
            <div
                className="absolute inset-0 z-0"
                aria-hidden="true"
            >
                <svg className="h-full w-full" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <motion.pattern
                            id="grid-pattern"
                            width={squareSize}
                            height={squareSize}
                            patternUnits="userSpaceOnUse"
                            animate={{
                                x: [0, squareSize],
                                y: [0, squareSize],
                            }}
                            transition={animationTransition}
                        >
                            <path
                                d={`M 0 ${squareSize} H ${squareSize}`}
                                strokeWidth={strokeWidth}
                                className="stroke-neutral-300/30 dark:stroke-neutral-700/30"
                            />
                            <path
                                d={`M ${squareSize} 0 V ${squareSize}`}
                                strokeWidth={strokeWidth}
                                className="stroke-neutral-300/30 dark:stroke-neutral-700/30"
                            />

                            <circle
                                cx={squareSize}
                                cy={squareSize}
                                r={dotRadius}
                                className="fill-neutral-400/50 dark:fill-neutral-700"
                            />
                            <circle
                                cx={squareSize}
                                cy={squareSize}
                                r={dotRadius}
                                className="fill-neutral-400/50 dark:fill-neutral-700"
                            />
                            <circle
                                cx={squareSize}
                                cy={squareSize}
                                r={dotRadius}
                                className="fill-neutral-400/50 dark:fill-neutral-700"
                            />
                            <circle
                                cx={squareSize}
                                cy={squareSize}
                                r={dotRadius}
                                className="fill-neutral-400/50 dark:fill-neutral-700"
                            />
                        </motion.pattern>
                    </defs>
                    <rect
                        width="110%"
                        height="110%"
                        x="-5%"
                        y="-5%"
                        fill="url(#grid-pattern)"
                    />
                </svg>
            </div>
            {children}
        </div>
    );
}

export default InfinityGrid;