"use client";

import Spline from "@splinetool/react-spline";
import { useState } from "react";
import { cn } from "@/lib/utils";

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

export function SplineScene({ sceneUrl, className }: SplineSceneProps) {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div className={cn("relative h-full w-full", className)}>
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-zinc-100 dark:bg-zinc-900">
          <div className="h-10 w-10 animate-spin rounded-full border-4 border-zinc-200 border-t-brand-500 dark:border-zinc-800" />
        </div>
      )}
      <Spline
        scene={sceneUrl}
        onLoad={() => setIsLoading(false)}
        className="h-full w-full"
      />
    </div>
  );
}