"use client";

import React from "react";

type Scope = "admin" | "user";

interface Props {
  scope: Scope;
  adminCount: number;
  userCount: number;
  onChange: (s: Scope) => void;
}

export function MenuScopePanel({ scope, adminCount, userCount, onChange }: Props) {
  return (
    <aside className="v5-mm-col v5-mm-col-scope">
      <div className="v5-mm-col-hd">
        <div>
          <div className="v5-mm-step">
            <span className="num">01</span>Scope
          </div>
          <h3>스코프</h3>
          <p>메뉴 타입을 선택하세요</p>
        </div>
      </div>
      <div className="v5-mm-scope-list">
        <div
          className={`v5-mm-scope${scope === "admin" ? " on" : ""}`}
          onClick={() => onChange("admin")}
        >
          <div className="v5-mm-scope-top">
            <div className="v5-mm-scope-ico">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M12 2 2 7l10 5 10-5-10-5z" />
                <path d="m2 17 10 5 10-5M2 12l10 5 10-5" />
              </svg>
            </div>
            <div className="v5-mm-scope-cnt">{adminCount}</div>
          </div>
          <div>
            <div className="v5-mm-scope-name">관리자</div>
            <div className="v5-mm-scope-desc">시스템·업무·리포트 관리 화면</div>
          </div>
        </div>

        <div
          className={`v5-mm-scope${scope === "user" ? " on" : ""}`}
          onClick={() => onChange("user")}
        >
          <div className="v5-mm-scope-top">
            <div className="v5-mm-scope-ico">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                <circle cx="12" cy="7" r="4" />
              </svg>
            </div>
            <div className="v5-mm-scope-cnt">{userCount}</div>
          </div>
          <div>
            <div className="v5-mm-scope-name">사용자</div>
            <div className="v5-mm-scope-desc">최종 사용자 대시보드·업무</div>
          </div>
        </div>
      </div>
    </aside>
  );
}