"use client"

import { useEffect, useState } from "react"
import { MeshGradient } from "@paper-design/shaders-react"

import { cn } from "@/lib/utils"

function isWebGL2Supported(): boolean {
  try {
    const canvas = document.createElement("canvas")
    const gl = canvas?.getContext("webgl2") ?? canvas?.getContext("webgl")
    return Boolean(gl)
  } catch {
    return false
  }
}

export default function BackgroundPaperShadersWrapper({ className }: { className?: string }) {
  const [supportsWebGL, setSupportsWebGL] = useState<boolean>(true)

  useEffect(() => {
    setSupportsWebGL(isWebGL2Supported())
  }, [])

  const speed = 1.0

  return (
    <div className={cn("relative h-full w-full overflow-hidden bg-black", className)}>
      {supportsWebGL ? (
        <MeshGradient
          className="absolute inset-0 h-full w-full"
          colors={["#000000", "#1a1a1a", "#333333", "#ffffff"]}
          speed={speed * 0.5}
        />
      ) : (
        <div className="absolute inset-0 h-full w-full bg-[radial-gradient(circle_at_top,_rgba(15,15,15,0.95),_rgba(0,0,0,1))]" />
      )}
    </div>
  )
}