import { Tag } from 'antd-mobile'
import type { RiskAlert, RiskLevel } from '../types'

type RiskAlertSectionProps = {
  risks: RiskAlert[]
}

const levelMeta: Record<RiskLevel, { color: 'danger' | 'warning' | 'default'; label: string }> = {
  red: { color: 'danger', label: '红色' },
  yellow: { color: 'warning', label: '黄色' },
  gray: { color: 'default', label: '灰色' },
}

export function RiskAlertSection({ risks }: RiskAlertSectionProps) {
  return (
    <section className="section-block">
      <div className="section-title-row">
        <div>
          <p className="section-kicker">Risk</p>
          <h2>风险预警</h2>
        </div>
        <span className="risk-count">{risks.length} 条</span>
      </div>
      <div className="risk-list">
        {risks.map((risk) => {
          const meta = levelMeta[risk.level]
          return (
            <button className="risk-item" key={risk.id} type="button">
              <div className="risk-header">
                <Tag color={meta.color}>{meta.label}</Tag>
                <span>{risk.type}</span>
                <time>{risk.discoveredAt}</time>
              </div>
              <strong>{risk.title}</strong>
              <p>{risk.description}</p>
            </button>
          )
        })}
      </div>
    </section>
  )
}