import { useNavigate } from 'react-router-dom'

/**
 * 服务降级期间的占位页：保留原页面代码，仅在功能开关关闭时展示此组件。
 */
export default function ComingSoon({ title = '该能力', description }) {
  const navigate = useNavigate()
  return (
    <div className="flex-1 flex items-center justify-center bg-gray-50 p-8 overflow-auto">
      <div className="max-w-md w-full bg-white border border-gray-200 rounded-xl shadow-sm px-8 py-10 text-center">
        <div className="w-14 h-14 mx-auto rounded-full bg-brand-50 text-brand-600 grid place-items-center text-2xl">
          🚧
        </div>
        <h2 className="mt-5 text-[18px] font-semibold text-gray-900">
          {title}：暂未开放
        </h2>
        <p className="mt-2 text-[13px] text-gray-500 leading-relaxed">
          {description || '当前阶段我们仅提供「上传」与「观察」能力，该模块已临时下线，等服务就绪后会重新开放。'}
        </p>
        <div className="mt-6 flex items-center justify-center gap-2">
          <button
            onClick={() => navigate('/all-skills')}
            className="px-4 py-1.5 text-[13px] rounded-md text-white bg-brand-600 hover:bg-brand-700"
          >
            返回全部 Skill
          </button>
          <button
            onClick={() => navigate('/upload')}
            className="px-4 py-1.5 text-[13px] rounded-md text-brand-600 bg-white border border-brand-200 hover:bg-brand-50"
          >
            去上传 Skill
          </button>
        </div>
      </div>
    </div>
  )
}
