import { S3UploadDemo } from '@/components/features/S3UploadDemo'

export default function TestS3UploadPage() {
  return (
    <div className="container mx-auto py-8">
      <div className="flex flex-col items-center space-y-8">
        <div className="text-center">
          <h1 className="text-txt-primary-normal mb-4 text-3xl font-bold">
            AWS S3 Upload Test AWS S3 Upload Test AWS S3 Upload Test
          </h1>
          <p className="text-txt-secondary-normal">
            Testing the file upload feature using the AWS S3 SDK Testing the file upload feature
            using the AWS S3 SDK Testing the file upload feature using the AWS S3 SDK Testing the
            file upload feature using the AWS S3 SDK Testing the file upload feature using the AWS
            S3 SDK
          </p>
        </div>

        <S3UploadDemo />

        <div className="bg-surface-element-normal max-w-2xl rounded-lg p-4">
          <h2 className="text-txt-primary-normal mb-2 text-lg font-semibold">
            How to use Hook How to use Hook
          </h2>
          <pre className="text-txt-secondary-normal overflow-x-auto text-xs">
            {`import { useS3Upload } from '@/hooks/useS3Upload'
import { BizTypeEnum } from '@/services/common/types'

const { uploading, progress, error, uploadFile } = useS3Upload({
  bizType: BizTypeEnum.Role,
  maxRetries: 3,
  retryDelay: 2000,
  onSuccess: (url) => console.log('上传成功:', url),
  onError: (error) => console.error('上传失败:', error),
  onProgress: (progress) => console.log('进度:', progress.percentage + '%')
})

// 使用
await uploadFile(file)`}
          </pre>
        </div>
      </div>
    </div>
  )
}
