CA/frontend/src/components/clinical/ClinicalKpiRow.tsx

import { memo } from 'react';
import { Users, CalendarDays, HeartPulse, Siren } from 'lucide-react';
import { StatCard } from '@/components/StatCard';
import { TESTIDS } from '@/utils/testids';
import type { InpatientClinicalResponse } from '@/services/api';

interface ClinicalKpiRowProps {
  kpis: InpatientClinicalResponse['kpis'];
}

/** 住院临床 4 项核心指标。375px 下 2 列，sm 起 4 列。 */
export const ClinicalKpiRow = memo(function ClinicalKpiRow({ kpis }: ClinicalKpiRowProps) {
  return (
    <div
      data-testid={TESTIDS.clinicalKpis}
      className="grid grid-cols-2 sm:grid-cols-4 gap-3"
    >
      <StatCard
        icon={<Users className="w-4 h-4 text-primary" />}
        label="住院总人次"
        value={kpis.total_admissions.toLocaleString()}
      />
      <StatCard
        icon={<CalendarDays className="w-4 h-4 text-primary" />}
        label="中位住院日"
        value={`${kpis.median_los_days} 天`}
      />
      <StatCard
        icon={<HeartPulse className="w-4 h-4 text-success" />}
        label="治愈好转率"
        value={`${(kpis.cure_rate * 100).toFixed(1)}%`}
        color="#16A34A"
      />
      <StatCard
        icon={<Siren className="w-4 h-4 text-warning" />}
        label="急诊入院占比"
        value={`${(kpis.emergency_admit_ratio * 100).toFixed(1)}%`}
        color="#D97706"
      />
    </div>
  );
});