invyone/frontend/components/dash/DashboardToolbar.tsx

'use client';

import { Save, Plus, Zap } from 'lucide-react';
import { useDashboardStore } from '@/stores/dashboardStore';
import { useControlMode } from '@/components/control/hooks/useControlMode';

interface DashboardToolbarProps {
  dashboardName: string;
  cardCount: number;
  onOpenLibrary: () => void;
  onSaveLayout: () => void;
}

export function DashboardToolbar({
  dashboardName,
  cardCount,
  onOpenLibrary,
  onSaveLayout,
}: DashboardToolbarProps) {
  const editMode = useDashboardStore((s) => s.editMode);
  const controlActive = useControlMode((s) => s.active);

  // 편집/제어 모드가 모두 꺼져 있으면 툴바 자체를 렌더링하지 않음 — 헤더 버튼으로 토글
  if (!editMode && !controlActive) return null;

  return (
    <div className="dash-toolbar">
      <div className="dash-toolbar-l">
        <span className="dash-cv-title">{dashboardName}</span>
        <span className="dash-cv-meta">{`템플릿 ${cardCount}개`}</span>
      </div>
      <div className="dash-toolbar-r">
        {controlActive && (
          <span className="dash-btn control-on" style={{ pointerEvents: 'none' }}>
            <Zap size={13} />
            <span>제어 모드 활성</span>
          </span>
        )}
        {editMode && !controlActive && (
          <>
            <button className="dash-btn primary" onClick={onOpenLibrary}>
              <Plus size={13} />
              <span>템플릿 추가</span>
            </button>
            <button className="dash-btn" onClick={onSaveLayout}>
              <Save size={13} />
              <span>저장</span>
            </button>
          </>
        )}
      </div>
    </div>
  );
}