import { Loader2 } from 'lucide-react'
import { cn } from '@/lib/utils'

/**
 * LoadingBlock — central spinner с подписью. Заменяет {@code @nstart/ui}
 * LoadingBlock. Для inline placeholder используйте Skeleton.
 *
 * Size variants:
 *  - sm: small inline spinner (py-4)
 *  - md: default centered (py-12)
 *  - lg: prominent (py-20)
 */
export type LoadingBlockProps = React.HTMLAttributes<HTMLDivElement> & {
  label?: React.ReactNode
  size?: 'sm' | 'md' | 'lg'
}

const SIZES = {
  sm: { wrapper: 'py-4', icon: 'size-3' },
  md: { wrapper: 'py-12', icon: 'size-5' },
  lg: { wrapper: 'py-20', icon: 'size-8' },
} 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-2 text-mute',
        s.wrapper,
        className,
      )}
      {...props}
    >
      <Loader2 className={cn('animate-spin text-accent', s.icon)} />
      {label && <span className="text-body">{label}</span>}
    </div>
  )
}
