'use client'

import { useThemeStyles, useTheme, 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 styles = useThemeStyles()
  const theme = useTheme()
  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',
  }

  // 根据主题选择边框和文字颜色
  const borderColor = theme === 'dark' ? 'border-indigo-400' : 'border-indigo-600'
  const textColor = theme === 'dark' ? 'text-slate-400' : 'text-slate-600'

  return (
    <div className={cn(styles.cardStyles.base, 'flex items-center justify-center py-12', className)}>
      <div className="text-center">
        <div
          className={cn(
            `animate-spin rounded-full ${borderColor} mx-auto`,
            sizeClasses[size],
          )}
        />
        {message && <p className={cn('mt-4', textColor)}>{message}</p>}
      </div>
    </div>
  )
}