"use client";

import { useEffect, useRef } from "react";

export function CosmicBackground() {
  const cosmosRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const co = cosmosRef.current;
    if (!co) return;

    // Stars
    const starColors = ["rgba(var(--v5-primary-rgb),.8)", "rgba(var(--v5-cyan-rgb),.7)", "rgba(var(--v5-pink-rgb),.7)"];
    for (let i = 0; i < 150; i++) {
      const s = document.createElement("div");
      s.className = "star" + (Math.random() > 0.83 ? " c" : "");
      if (s.classList.contains("c"))
        s.style.setProperty("--sc", starColors[(Math.random() * 3) | 0]);
      s.style.left = Math.random() * 100 + "%";
      s.style.top = Math.random() * 100 + "%";
      s.style.setProperty("--d", 2 + Math.random() * 5 + "s");
      s.style.setProperty("--dl", Math.random() * 5 + "s");
      s.style.setProperty("--mo", (0.3 + Math.random() * 0.7).toString());
      co.appendChild(s);
    }

    // Particles
    const particleColors = ["var(--v5-primary)", "var(--v5-cyan)", "var(--v5-pink)"];
    for (let i = 0; i < 20; i++) {
      const p = document.createElement("div");
      p.className = "particle";
      p.style.left = Math.random() * 100 + "%";
      p.style.setProperty("--sz", 2 + Math.random() * 4 + "px");
      p.style.setProperty("--pc", particleColors[(Math.random() * 3) | 0]);
      p.style.setProperty("--fd", 7 + Math.random() * 12 + "s");
      p.style.setProperty("--fdl", Math.random() * 10 + "s");
      co.appendChild(p);
    }

    return () => {
      co.querySelectorAll(".star, .particle").forEach((el) => el.remove());
    };
  }, []);

  return (
    <div ref={cosmosRef} className="v5-cosmos">
      <div className="neb neb-1" />
      <div className="neb neb-2" />
      <div className="neb neb-3" />
      <div className="neb neb-4" />
      <div className="shooting-star" style={{ top: "12%", left: "70%" }} />
      <div className="shooting-star" style={{ top: "35%", left: "55%" }} />
    </div>
  );
}
