import React from "react";

const IconStack = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
  </svg>
);

const IconClock = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
    <circle cx="12" cy="12" r="10" />
    <path d="M12 6v6l4 2" />
  </svg>
);

/**
 * Primary KPI row: total documents and pending approvals (other metrics are in the toolbar).
 * @param {{
 *   stats: { total?: number, pending?: number },
 *   onQuickAdd?: () => void,
 * }} props
 */
const StatCards = ({ stats, onQuickAdd }) => {
  const { total = 0, pending = 0 } = stats || {};

  const cards = [
    {
      id: "total",
      label: "Total SWI / SOP",
      value: total,
      hint: "Documents registered in the system.",
      icon: IconStack,
      warn: false,
    },
    {
      id: "pending",
      label: "Pending approvals",
      value: pending,
      hint: "Awaiting electronic signature steps.",
      icon: IconClock,
      warn: false,
    },
  ];

  return (
    <div className="portal-kpi-grid portal-kpi-grid--two">
      {cards.map((c) => {
        const Icon = c.icon;
        return (
          <article key={c.id} className={`portal-kpi${c.warn ? " portal-kpi--warn" : ""}`}>
            <div className="portal-kpi__top">
              <span className="portal-kpi__icon" aria-hidden>
                <Icon />
              </span>
              {onQuickAdd ? (
                <button
                  type="button"
                  className="portal-kpi__add"
                  aria-label="Create new SWI / SOP"
                  title="New document"
                  onClick={onQuickAdd}
                >
                  +
                </button>
              ) : null}
            </div>
            <p className="portal-kpi__label">{c.label}</p>
            <p className="portal-kpi__value">{c.value}</p>
            <p className="portal-kpi__hint">{c.hint}</p>
          </article>
        );
      })}
    </div>
  );
};

export default StatCards;
