// frontend/components/dashboard/ApprovalSummaryCard.tsx
"use client";
import Link from "next/link";
import { Icon } from "@/components/Icon";
import type { ApprovalSummary } from "@/lib/types";
import { MiniRow } from "./MiniRow";

export function ApprovalSummaryCard({
  items,
  savedToday,
  pending,
}: {
  items: ApprovalSummary[];
  savedToday: string;
  pending: number;
}) {
  return (
    <section className="card appr">
      <div className="ch">
        <div className="ico lime">
          <Icon name="spark" />
        </div>
        <div className="htext">
          <h3>아리 결재함</h3>
          <div className="sub">오늘 {savedToday} 아껴드렸어요</div>
        </div>
        <span className="count warm">대기 {pending}건</span>
      </div>

      {items.length === 0 ? (
        <div className="appr-empty">
          <span className="ae-tick">
            <Icon name="tick" w={3} />
          </span>
          지금은 확인할 게 없어요 — 다 처리해뒀어요.
        </div>
      ) : (
        <div className="mini-list">
          {items.map((it) => (
            <MiniRow key={it.id} tone={it.tone} icon={it.icon} text={it.title} sub={it.time} />
          ))}
        </div>
      )}

      {/* MVP: 결재함 전용 페이지는 placeholder("준비 중") */}
      <Link className="mini-cta" href="/approvals" aria-label="결재함에서 승인하기 (준비 중)">
        <Icon name="tick" w={3} />
        결재함에서 승인하기
      </Link>
    </section>
  );
}