// src/components/three/Loader.tsx
// Input: optional message string
// Output: shimmer skeleton placeholder while Canvas loads
// Rationale: shown while SceneWrapper (ssr:false) initializes

import { Skeleton } from '@/components/ui/Skeleton'
import { RingMeter } from '@/components/charts/RingMeter'

export interface LoaderProps {
  message?: string
}

export function SceneLoader({ message = 'Chargement scène…' }: LoaderProps) {
  return (
    <div className="w-full h-full flex flex-col items-center justify-center gap-4 bg-bg-base rounded-lg">
      <RingMeter value={75} color="#3DB8E8" size={48} />
      <span className="text-caption text-text-muted">{message}</span>
      <div className="flex gap-2">
        <Skeleton width={60} height={6} rounded="full" />
        <Skeleton width={40} height={6} rounded="full" />
        <Skeleton width={50} height={6} rounded="full" />
      </div>
    </div>
  )
}