import { AlertCircle, RefreshCw } from 'lucide-react'

interface QueryErrorProps {
  error?: unknown
  onRetry?: () => void
  message?: string
}

/**
 * 查询错误状态组件
 * 在 useQuery 的 isError 状态下显示错误提示和重试按钮
 */
export default function QueryError({ error, onRetry, message }: QueryErrorProps) {
  const errMsg = message
    || (error as any)?.response?.data?.error?.message
    || (error as any)?.message
    || '数据加载失败，请稍后重试'

  return (
    <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
      <div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mb-3">
        <AlertCircle className="w-6 h-6 text-red-500" />
      </div>
      <p className="text-sm text-gray-600 mb-3 max-w-md">{errMsg}</p>
      {onRetry && (
        <button
          onClick={onRetry}
          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-primary bg-primary/5 rounded-lg hover:bg-primary/10 transition-colors"
        >
          <RefreshCw className="w-3.5 h-3.5" />
          重试
        </button>
      )}
    </div>
  )
}
