import type { CSSProperties } from "react";

const particleSlots = [
  { x: "12%", y: "16%" },
  { x: "31%", y: "24%" },
  { x: "72%", y: "12%" },
  { x: "88%", y: "36%" },
  { x: "18%", y: "58%" },
  { x: "46%", y: "66%" },
  { x: "78%", y: "74%" },
  { x: "92%", y: "86%" }
];

type ParticleStyle = CSSProperties & {
  "--particle-index": string;
  "--particle-x": string;
  "--particle-y": string;
};

export function MagicalParticleLayer() {
  return (
    <>
      <div className="workspace-background-layer" aria-hidden="true" />
      <div className="global-particle-layer" aria-hidden="true">
        <span className="global-particle-orbit" />
        <span className="global-particle-orbit global-particle-orbit-secondary" />
        <span className="global-particle-sweep" />
        <span className="global-particle-ribbon" />
        <span className="global-particle-frame global-particle-frame-tl" />
        <span className="global-particle-frame global-particle-frame-br" />
        {particleSlots.map((slot, index) => (
          <span
            key={`${slot.x}-${slot.y}`}
            className="global-particle-glint"
            style={{ "--particle-index": String(index), "--particle-x": slot.x, "--particle-y": slot.y } as ParticleStyle}
          />
        ))}
      </div>
    </>
  );
}