'use client'

import { useEffect } from 'react'

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error('页面错误:', error)
  }, [error])

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-black via-[#0a0a0a] to-[#111111]">
      <div className="glass-card p-8 max-w-md w-full mx-4">
        <div className="text-center">
          {/* 错误图标 */}
          <div className="text-6xl mb-4">😕</div>
          
          {/* 错误标题 */}
          <h2 className="text-2xl font-bold mb-4 text-[var(--app-text)]">
            哎呀，出错了
          </h2>
          
          {/* 错误描述 */}
          <p className="text-[var(--app-text-secondary)] mb-6">
            页面遇到了一些问题，请稍后再试
          </p>
          
          {/* 操作按钮 */}
          <div className="flex gap-4">
            <button
              onClick={reset}
              className="btn-ios flex-1"
            >
              重试
            </button>
            <button
              onClick={() => window.location.href = '/'}
              className="btn-ios-secondary flex-1"
            >
              返回首页
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}