import React from "react";

export default function ChecklistCard({
  checklistStats,
  checklistOpen,
  setChecklistOpen,
  checklistItems,
  hasSelectedTask
}) {
  return (
    <section className="card checklist">
      <div className="row-header">
        <div className="row-header-main">
          <h3>Чек-лист запуска</h3>
          <div className="status-caption">Готово: {checklistStats.ok}/{checklistStats.total} · Проблемы: {checklistStats.fail}</div>
        </div>
        <button type="button" className="ghost" onClick={() => setChecklistOpen(!checklistOpen)}>
          {checklistOpen ? "Свернуть" : "Развернуть"}
        </button>
      </div>
      {checklistOpen && (
        <div className="checklist-list">
          {checklistItems.map((item) => {
            const status = item.ok ? "ok" : (item.warn ? "warn" : "fail");
            const statusLabel = item.ok ? "Готово" : (item.warn ? "Есть проблемы" : "Нужно внимание");
            return (
              <div key={item.id} className={`checklist-item ${status}`}>
                <div className="checklist-meta">
                  <div className="checklist-title">{item.label}</div>
                  <div className="checklist-hint">{item.hint}</div>
                </div>
                <div className="checklist-actions">
                  <span className={`checklist-badge ${status}`}>{statusLabel}</span>
                  <button
                    type="button"
                    className="ghost"
                    onClick={item.action}
                    disabled={!hasSelectedTask}
                  >
                    {item.actionLabel}
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </section>
  );
}