import { ShieldCheck, UserCheck, Users, UserX } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'

import type { UserSummary } from '../../../../interfaces/user/model'
import styles from './index.module.scss'

interface SummaryCardsProps {
  summary: UserSummary
}

interface SummaryCard {
  label: string
  value: number
  detail: string
  icon: LucideIcon
  tone: string
}

export default function SummaryCards({ summary }: SummaryCardsProps) {
  const cards: SummaryCard[] = [
    { label: '全部用户', value: summary.total, detail: '当前组织账号', icon: Users, tone: 'teal' },
    { label: '活跃用户', value: summary.active, detail: '可以正常访问', icon: UserCheck, tone: 'green' },
    { label: '未激活', value: summary.inactive, detail: '等待重新启用', icon: UserX, tone: 'amber' },
    { label: '管理员', value: summary.admins, detail: '拥有管理权限', icon: ShieldCheck, tone: 'navy' },
  ]

  return (
    <section className={`summary-grid ${styles.root}`} aria-label="用户概览">
      {cards.map((card) => {
        const Icon = card.icon
        return (
          <article className={`summary-card ${card.tone}`} key={card.label}>
            <div className="summary-card-top"><span>{card.label}</span><b aria-hidden="true"><Icon size={15} /></b></div>
            <strong>{card.value}</strong>
            <small>{card.detail}</small>
          </article>
        )
      })}
    </section>
  )
}