'use client';

import { ShaderGradient, ShaderGradientCanvas } from '@shadergradient/react';
import React from 'react';

const ShaderBackground: React.FC<React.ComponentProps<'div'>> = ({ style, ...props }) => {
  return (
    <ShaderGradientCanvas
      style={{
        position: 'absolute',
        top: 0,
        width: '100vw',
        height: '100vh',
        pointerEvents: 'none',
      }}
    >
      {/*<ShaderGradient
                control="props" // 使用 props 模式，直接通过属性配置渐变参数
                animate="on" // 控制渐变是否动画化（"on" 表示启用动画）
                axesHelper="on" // 是否显示坐标轴辅助线，用于调试（"on" 表示显示）
                bgColor1="#ECEFF4" // 背景颜色 1，用于渐变的背景色调
                bgColor2="#ECEFF4" // 背景颜色 2，用于渐变的背景色调
                brightness={1} // 亮度级别，控制整体渐变的明亮程度
                cAzimuthAngle={1} // 相机方位角，控制相机围绕目标的水平旋转角度
                cDistance={6} // 相机距离，控制相机到目标的距离
                cPolarAngle={90} // 相机极角，控制相机围绕目标的垂直旋转角度
                cameraZoom={15} // 相机缩放级别，控制相机的放大倍数
                color1="#021033" // 渐变颜色 1，第一种主要颜色
                color2="#ECEFF4" // 渐变颜色 2，第二种主要颜色
                color3="#4E5C78" // 渐变颜色 3，第三种主要颜色
                envPreset="city" // 环境预设，设置背景环境贴图（如 "city" 表示城市环境）
                fov={45} // 视场角度（Field of View），控制相机视野宽度（度数）
                grain="off" // 颗粒效果，是否添加噪点（"off" 表示关闭）
                lightType="3d" // 灯光类型，设置照明模式（如 "3d" 表示 3D 灯光）
                pixelDensity={1} // 像素密度，控制渲染质量（越高越清晰，但性能消耗更大）
                positionX={0} // X 轴位置，控制渐变网格的 X 坐标
                positionY={0} // Y 轴位置，控制渐变网格的 Y 坐标
                positionZ={5} // Z 轴位置，控制渐变网格的 Z 坐标
                reflection={1} // 反射强度，控制渐变的反射效果
                rotationX={0} // X 轴旋转，控制渐变网格的 X 轴旋转角度
                rotationY={0} // Y 轴旋转，控制渐变网格的 Y 轴旋转角度
                rotationZ={0} // Z 轴旋转，控制渐变网格的 Z 轴旋转角度
                shader="defaults" // 着色器类型，设置默认着色器（"defaults" 表示默认着色器）
                type="waterPlane" // 网格类型，设置渐变的形状（如 "waterPlane" 表示水波平面）
                uAmplitude={0} // 统一变量：振幅，控制波形渐变的振幅（在 Framer 和 shadergradient.co 上重名为 Spiral）
                uDensity={2.8} // 统一变量：密度，控制渐变图案的密度
                uFrequency={5.5} // 统一变量：频率，控制渐变波形的频率
                uSpeed={0.1} // 统一变量：速度，控制渐变运动的速度
                uStrength={3.4} // 统一变量：强度，控制渐变效果的强度
                uTime={0.2} // 统一变量：时间，控制着色器动画的时间参数
                wireframe={false} // 线框模式，是否显示网格线框（false 表示关闭）
                   />*/}
      <ShaderGradient
        control='query'
        urlString={
          'https://www.shadergradient.co/customize?animate=on&axesHelper=on&bgColor1=%23ECEFF4&bgColor2=%23ECEFF4&brightness=1&cAzimuthAngle=0&cDistance=20&cPolarAngle=90&cameraZoom=1&color1=%23021033&color2=%23ECEFF4&color3=%234E5C78&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=10&frameRate=10&grain=off&lightType=3d&pixelDensity=3&positionX=0&positionY=0&positionZ=5&range=enabled&rangeEnd=40&rangeStart=0&reflection=1&rotationX=0&rotationY=0&rotationZ=0&shader=defaults&type=waterPlane&uAmplitude=0&uDensity=2.8&uFrequency=5.5&uSpeed=0.3&uStrength=3.4&uTime=0.2&wireframe=false'
        }
      />
    </ShaderGradientCanvas>
  );
};

export default ShaderBackground;