'use client';

import { Canvas } from '@react-three/fiber';
import { OrbitControls, Stage } from '@react-three/drei';
import { Suspense } from 'react';
import { EffectComposer, Bloom, Noise, Vignette } from '@react-three/postprocessing';
import { useAssetLoader } from '@/hooks/useAssetLoader';
import { Model } from './Model';

export default function ShowcaseCanvas() {
  const { asset, loading, error } = useAssetLoader('/assets.json');

  if (loading || error) return null;

  return (
    <div className="h-[500px] w-full border border-zinc-800 rounded-xl overflow-hidden bg-black">
      <Canvas dpr={[1, 2]} shadows camera={{ fov: 45 }}>
        <color attach="background" args={['#050505']} />
        
        <Suspense fallback={null}>
          <Stage intensity={0.5} environment="city">
            {asset && <Model url={asset.modelUrl} />}
          </Stage>
        </Suspense>

        <EffectComposer disableNormalPass>
          <Bloom luminanceThreshold={1} mipmapBlur intensity={1.5} />
          <Noise opacity={0.05} />
          <Vignette eskil={false} offset={0.1} darkness={1.1} />
        </EffectComposer>

        <OrbitControls makeDefault />
      </Canvas>
    </div>
  );
}