import React from 'react';
import { CERT_LABELS } from '../data/constants';

const STATUS_TEXT = {
  pending: '待上传',
  uploading: '上传中',
  recognizing: '识别中',
  confirm: '待确认',
  done: '已完成',
  failed: '识别失败',
};

export default function CertificateUploadCard({ certType, required, status, onClick, imageUrl }) {
  const label = CERT_LABELS[certType];
  const isDone = status === 'done';
  const isFailed = status === 'failed';

  return (
    <div
      className={`dt-cert-card ${isDone ? 'done' : ''} ${isFailed ? 'error' : ''}`}
      onClick={onClick}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => e.key === 'Enter' && onClick?.()}
    >
      <div className="dt-cert-card-header">
        <span className="dt-cert-card-title">{label}</span>
        {required ? (
          <span className="dt-cert-badge">必填</span>
        ) : (
          <span className="dt-cert-badge optional">选填</span>
        )}
      </div>
      <div className="dt-cert-status">{STATUS_TEXT[status] || '待上传'}</div>
      {imageUrl && (
        <div className="dt-cert-preview">
          <img src={imageUrl} alt={label} className="dt-cert-thumb" />
        </div>
      )}
    </div>
  );
}
