import type { WorkflowsPageLogic } from '../WorkflowsPageLogic';

const STATS = [
  { key: 'total', label: '工作流数量', tone: 'brand' },
  { key: 'enabled', label: '启用中', tone: 'success' },
  { key: 'scheduled', label: '定时运行', tone: 'warning' }
] as const;

export default function WorkflowStatsStrip({ logic }: { logic: WorkflowsPageLogic }) {
  return (
    <div className="workflows-stats-grid">
      {STATS.map((item) => (
        <div key={item.key} className="workflows-stat-card">
          <div className="workflows-stat-label">{item.label}</div>
          <div className="workflows-stat-value-row">
            <span className="workflows-stat-value">{logic.stats[item.key]}</span>
            <span className={`workflows-stat-chip workflows-tone-${item.tone}`}>实时状态</span>
          </div>
        </div>
      ))}
    </div>
  );
}