import {ReactNode} from 'react'

export type SftpayPageProps = {

}

export default async function SftpayPage(props: SftpayPageProps) {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <div className="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow-lg">
        <div className="text-center">
          <div className="flex justify-center">
            <div className="rounded-full bg-green-100 p-3">
              <svg className="h-12 w-12 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7"/>
              </svg>
            </div>
          </div>
          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">支付成功</h2>
          <p className="mt-2 text-sm text-gray-600">
            您的订单已成功支付，感谢您的使用
          </p>
        </div>

        <div className="mt-8 space-y-6">
          <div className="border-t border-gray-200 pt-4">
            <dl className="space-y-4">
              <div className="flex justify-between">
                <dt className="text-sm font-medium text-gray-500">订单编号</dt>
                <dd className="text-sm text-gray-900">ORD-12345678</dd>
              </div>
              <div className="flex justify-between">
                <dt className="text-sm font-medium text-gray-500">支付金额</dt>
                <dd className="text-sm font-bold text-gray-900">¥ 299.00</dd>
              </div>
              <div className="flex justify-between">
                <dt className="text-sm font-medium text-gray-500">支付时间</dt>
                <dd className="text-sm text-gray-900">{new Date().toLocaleString('zh-CN')}</dd>
              </div>
              <div className="flex justify-between">
                <dt className="text-sm font-medium text-gray-500">支付方式</dt>
                <dd className="text-sm text-gray-900">SFT支付</dd>
              </div>
            </dl>
          </div>

          <div className="flex items-center justify-center">
            <button
              type="button"
              className="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              返回首页
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
