"use client";

import dynamic from "next/dynamic";

// 1. Definiamo l'interfaccia delle props
interface PlasmaProps {
  color?: string;
  speed?: number;
  direction?: "forward" | "backward";
  scale?: number;
  opacity?: number;
  mouseInteractive?: boolean;
}

// 2. Passiamo l'interfaccia al generic di dynamic
const PlasmaCanvas = dynamic<PlasmaProps>(
  () => import("../../src/components/Plasma"), 
  {
    ssr: false,
    loading: () => <div style={{ background: "black", width: "100vw", height: "100vh" }} />,
  }
);

export default function PlasmaPage() {
  return (
    <div style={{ width: "100%", height: "600px", position: "relative" }}>
      <PlasmaCanvas 
        color="#5f0000" 
        speed={0.6} 
        direction="forward" 
        scale={1.1} 
        opacity={0.8} 
        mouseInteractive={true} 
      />
    </div>
  );
}