// frontend/components/approvals/AutonomyCard.tsx — approve-page.jsx MODES 이식
"use client";
import { Icon } from "@/components/Icon";
import type { Autonomy } from "@/lib/types";

// 원본 approve-page.jsx MODES — id 만 백엔드 enum 으로 매핑(approve→approval_first, auto→full_auto)
export const MODES: { id: Autonomy; title: string; rec?: boolean; desc: string }[] = [
  {
    id: "approval_first",
    title: "승인 우선",
    desc: "모든 실행 전에 내 확인을 받아요. 아리를 알아가는 단계에 좋아요.",
  },
  {
    id: "mixed",
    title: "혼합",
    rec: true,
    desc: "되돌릴 수 있는 일(일정 이동·메일 정리)은 자동, 보내기·결제·위임은 승인 대기.",
  },
  {
    id: "full_auto",
    title: "완전 자율",
    desc: "다 해두고 보고만 해요. 모든 실행은 탭 한 번으로 되돌릴 수 있어요.",
  },
];

export function AutonomyCard({
  autonomy,
  onPick,
}: {
  autonomy: string;
  onPick: (id: Autonomy) => void;
}) {
  return (
    <section className="card auton">
      <div className="ch">
        <div className="ico">
          <Icon name="shield" />
        </div>
        <div className="htext">
          <h3>아리 자율성</h3>
          <div className="sub">어디까지 맡길지 정해요</div>
        </div>
      </div>
      <div className="auton-list">
        {MODES.map((m) => (
          <button
            key={m.id}
            className={"au-opt" + (autonomy === m.id ? " on" : "")}
            onClick={() => onPick(m.id)}
            aria-pressed={autonomy === m.id}
          >
            <span className="au-radio" />
            <span className="au-body">
              <span className="au-title">
                {m.title}
                {m.rec && <em className="au-rec">추천</em>}
              </span>
              <span className="au-desc">{m.desc}</span>
            </span>
          </button>
        ))}
      </div>
      <div className="auton-note">
        <Icon name="swap" />
        어떤 모드든, 아리가 한 일은 전부 기록되고 되돌릴 수 있어요.
      </div>
    </section>
  );
}
