import { cn } from '@/lib/utils'
import { GlobeLoader } from './globe-loader'

/**
 * LoadingBlock — central spinner с подписью. Используется везде где
 * загружаются данные / окна. С 11.05.2026 заменили Loader2 spinner на
 * GlobeLoader (orbital globe loader per /Users/zimin/Downloads/Globe loader).
 *
 * Size variants:
 *  - sm: small inline (py-4, 32px globe)
 *  - md: default centered (py-12, 64px globe)
 *  - lg: prominent full-page (py-20, 96px globe)
 */
export type LoadingBlockProps = React.HTMLAttributes<HTMLDivElement> & {
  label?: React.ReactNode
  size?: 'sm' | 'md' | 'lg'
}

const SIZES = {
  sm: { wrapper: 'py-4', globe: 32 },
  md: { wrapper: 'py-12', globe: 64 },
  lg: { wrapper: 'py-20', globe: 96 },
} as const

export function LoadingBlock({ className, label, size = 'md', ...props }: LoadingBlockProps) {
  const s = SIZES[size]
  return (
    <div
      role="status"
      aria-busy="true"
      className={cn(
        'flex flex-col items-center justify-center gap-3 text-ink',
        s.wrapper,
        className,
      )}
      {...props}
    >
      <GlobeLoader size={s.globe} />
      {label && <span className="text-body text-mute">{label}</span>}
    </div>
  )
}