'use client';

import { Suspense, lazy } from 'react';
import { cn } from '@/lib/utils';

const Spline = lazy(() => import('@splinetool/react-spline'));

interface SplineSceneProps {
  scene: string;
  className?: string;
}

export function SplineScene({ scene, className }: SplineSceneProps) {
  return (
    <Suspense
      fallback={
        <div className="flex h-full w-full items-center justify-center bg-[#221F20]">
          <div className="relative h-12 w-12">
            <div className="absolute inset-0 rounded-full border border-[#e7e7e7]/20" />
            <div className="absolute inset-0 animate-spin rounded-full border-t-2 border-[#e7e7e7]" />
            <div className="absolute inset-2 rounded-full bg-[#5e5e5e]/30 blur-md" />
          </div>
        </div>
      }
    >
      <Spline scene={scene} className={cn('h-full w-full', className)} />
    </Suspense>
  );
}