xiaoxia-saas/apps/web/src/pages/editing-planner/components/ModeBar.tsx

import React from "react"
import type { TemplateMode } from "@/api/editing-planner"

interface ModeBarProps {
  modeList: { key: TemplateMode; label: string; icon: string }[]
  currentMode: TemplateMode
  onModeChange: (mode: TemplateMode) => void
}

const ModeBar: React.FC<ModeBarProps> = ({ modeList, currentMode, onModeChange }) => {
  return (
    <div className="ep-mode-bar">
      <span className="ep-mode-bar-label">剪辑模式：</span>
      {modeList.map((m) => (
        <button
          key={m.key}
          className={`ep-mode-btn ${currentMode === m.key ? "active" : ""}`}
          onClick={() => onModeChange(m.key)}
        >
          <span className="ep-mode-icon">{m.icon}</span>
          <span className="ep-mode-label">{m.label}</span>
        </button>
      ))}
    </div>
  )
}

export default ModeBar