import { Card } from 'antd'
import type { ClaimOrderInfo, ClaimProductInfo } from '@/types/claim'
import { ClaimProductItems } from './claim-shared'

export function ClaimHeaderCard({
  order,
  product,
  currentStep,
  progressText,
  expectedUid,
}: {
  order: ClaimOrderInfo | null
  product: ClaimProductInfo | null
  currentStep: number
  progressText: string
  expectedUid: string
}) {
  return (
    <Card className="claim-header-card">
      <div className="claim-header-copy">
        <span className="eyebrow">商品领取</span>
        <h1>{product?.title || '商品领取'}</h1>
        <p>订单号：{order?.platformOrderId || '-'}</p>
        {expectedUid ? <p>游戏 UID：{expectedUid}</p> : null}
        <ClaimProductItems product={product} compact />
      </div>

      <div className="claim-step-indicator">
        <div className="claim-step-dots" aria-label={`当前第 ${currentStep} 步`}>
          {[1, 2, 3, 4].map((step) => (
            <span
              key={step}
              className={currentStep >= step ? 'claim-step-dot active' : 'claim-step-dot'}
            >
              {step}
            </span>
          ))}
        </div>
        <span className="claim-step-progress-text">{progressText}</span>
      </div>
    </Card>
  )
}
