'use client'

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

interface ErrorStateProps {
  message: string
  onRetry?: () => void
  retryLabel?: string
  className?: string
}

export default function ErrorState({
  message,
  onRetry,
  retryLabel = '重试',
  className,
}: ErrorStateProps) {
  const styles = useThemeStyles()
  const theme = useTheme()
  
  // 根据主题选择错误状态的颜色
  const errorBg = theme === 'dark' ? 'bg-red-900/30' : 'bg-red-50'
  const errorBorder = theme === 'dark' ? 'border-red-800' : 'border-red-200'
  const errorText = theme === 'dark' ? 'text-red-300' : 'text-red-700'

  return (
    <div className={cn('text-center py-12', className)}>
      <div
        className={cn(
          styles.cardStyles.base,
          `${errorBg} ${errorBorder} ${errorText} px-4 py-3`,
        )}
      >
        <strong className="font-bold">错误：</strong>
        <span className="block sm:inline">{message}</span>
      </div>
      {onRetry && (
        <button onClick={onRetry} className={cn(styles.buttonStyles.primary, 'mt-4')}>
          {retryLabel}
        </button>
      )}
    </div>
  )
}