'use client'

import { useEffect, useState } from 'react'
import { cn } from '@/lib/utils'

const LOADERS = [
  'pascal-loader-1',
  'pascal-loader-2',
  'pascal-loader-3',
  'pascal-loader-4',
  'pascal-loader-5',
]

interface SceneLoaderProps {
  className?: string
  fullScreen?: boolean
}

export function SceneLoader({ className, fullScreen = false }: SceneLoaderProps) {
  const [loaderClass, setLoaderClass] = useState<string | null>(null)

  useEffect(() => {
    // Pick a random loader on mount
    setLoaderClass(LOADERS[Math.floor(Math.random() * LOADERS.length)] ?? LOADERS[0]!)
  }, [])

  if (!loaderClass) return null

  return (
    <div 
      className={cn(
        "z-100 flex items-center justify-center bg-background/80 backdrop-blur-md transition-opacity duration-300",
        fullScreen ? "fixed inset-0" : "absolute inset-0",
        className
      )}
    >
       <div className={cn(loaderClass, "text-foreground opacity-80")} />
    </div>
  )
}