Star Grid

"use client";
import { useState, useEffect } from "react";

export default function StarGrid({ cols = 12, rows = 8 }) {
  const [glowing, setGlowing] = useState<Set<number>>(new Set());

  useEffect(() => {
    const total = cols * rows;
    const interval = setInterval(() => {
      const newGlowing = new Set<number>();
      for (let i = 0; i < 10; i++) {
        newGlowing.add(Math.floor(Math.random() * total));
      }
      setGlowing(newGlowing);
    }, 2000);
    return () => clearInterval(interval);
  }, [cols, rows]);

  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 16 }}>
      {Array.from({ length: cols * rows }).map((_, i) => (
        <div key={i} style={{
          width: 4, height: 4, borderRadius: "50%",
          backgroundColor: glowing.has(i) ? "#E1FF6C" : "rgba(255,255,255,0.1)",
          boxShadow: glowing.has(i) ? "0 0 8px #E1FF6C" : "none",
          transition: "all 1s ease-in-out",
        }} />
      ))}
    </div>
  );
}