'use client'

import { cn } from '@/lib/ui-styles'

interface LoadingStateProps {
  message?: string
  className?: string
  size?: 'sm' | 'md' | 'lg'
}

export default function LoadingState({ message = '加载中...', className, size = 'md' }: LoadingStateProps) {
  const sizeClasses = {
    sm: 'h-8 w-8 border-b-2',
    md: 'h-12 w-12 border-b-2',
    lg: 'h-16 w-16 border-b-2',
  }

  return (
    <div
      className={cn(
        'flex items-center justify-center rounded-lg border border-slate-200 bg-white py-12 transition-colors dark:border-slate-700 dark:bg-slate-800',
        className,
      )}
    >
      <div className="text-center">
        <div
          className={cn(
            'animate-spin rounded-full border-slate-400 dark:border-slate-500 mx-auto',
            sizeClasses[size],
          )}
        />
        {message && <p className="mt-4 text-slate-600 dark:text-slate-400">{message}</p>}
      </div>
    </div>
  )
}