ERP-node/frontend/components/screen/toolbar/SlimToolbar.tsx

"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Database, ArrowLeft, Undo, Redo, Play, Save } from "lucide-react";
import { cn } from "@/lib/utils";

interface SlimToolbarProps {
  screenName?: string;
  tableName?: string;
  onBack: () => void;
  onSave: () => void;
  onUndo: () => void;
  onRedo: () => void;
  onPreview: () => void;
  canUndo: boolean;
  canRedo: boolean;
  isSaving?: boolean;
}

export const SlimToolbar: React.FC<SlimToolbarProps> = ({
  screenName,
  tableName,
  onBack,
  onSave,
  onUndo,
  onRedo,
  onPreview,
  canUndo,
  canRedo,
  isSaving = false,
}) => {
  return (
    <div className="flex h-14 items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 shadow-sm">
      {/* 좌측: 네비게이션 및 화면 정보 */}
      <div className="flex items-center space-x-4">
        <Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
          <ArrowLeft className="h-4 w-4" />
          <span>목록으로</span>
        </Button>

        <div className="h-6 w-px bg-gray-300" />

        <div className="flex items-center space-x-3">
          <div>
            <h1 className="text-lg font-semibold text-gray-900">{screenName || "화면 설계"}</h1>
            {tableName && (
              <div className="mt-0.5 flex items-center space-x-1">
                <Database className="h-3 w-3 text-gray-500" />
                <span className="font-mono text-xs text-gray-500">{tableName}</span>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* 우측: 액션 버튼들 */}
      <div className="flex items-center space-x-2">
        <Button
          variant="outline"
          size="sm"
          onClick={onUndo}
          disabled={!canUndo}
          className="flex items-center space-x-1"
        >
          <Undo className="h-4 w-4" />
          <span className="hidden sm:inline">실행취소</span>
        </Button>

        <Button
          variant="outline"
          size="sm"
          onClick={onRedo}
          disabled={!canRedo}
          className="flex items-center space-x-1"
        >
          <Redo className="h-4 w-4" />
          <span className="hidden sm:inline">다시실행</span>
        </Button>

        <div className="h-6 w-px bg-gray-300" />

        <Button variant="outline" size="sm" onClick={onPreview} className="flex items-center space-x-2">
          <Play className="h-4 w-4" />
          <span>미리보기</span>
        </Button>

        <Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
          <Save className="h-4 w-4" />
          <span>{isSaving ? "저장 중..." : "저장"}</span>
        </Button>
      </div>
    </div>
  );
};

export default SlimToolbar;