xiaoxia-saas/apps/web/src/pages/generate/components/title/TitleStylePanel.tsx

/**
 * 标题样式设置区
 * 位置/字体/字号/样式按钮/预设
 */
import React from "react"
import type { TitleSettings } from "../../types"
import TitlePresetsGrid from "./TitlePresetsGrid"

interface PositionOption {
  value: string
  label: string
}

interface TitlePresetItem {
  key: string
  label: string
  previewStyle: React.CSSProperties
}

interface TitleStylePanelProps {
  settings: TitleSettings
  onUpdatePosition: (position: string) => void
  onUpdateFont: (font: string) => void
  onUpdateSize: (size: number) => void
  onToggleBold: () => void
  onToggleItalic: () => void
  onToggleStroke: () => void
  onToggleShadow: () => void
  onApplyPreset: (presetKey: string) => void
  activePreset: string | null
  titlePresets: TitlePresetItem[]
  POSITION_OPTIONS: PositionOption[]
  FONT_OPTIONS: string[]
}

const TitleStylePanel: React.FC<TitleStylePanelProps> = ({
  settings,
  onUpdatePosition,
  onUpdateFont,
  onUpdateSize,
  onToggleBold,
  onToggleItalic,
  onToggleStroke,
  onToggleShadow,
  onApplyPreset,
  activePreset,
  titlePresets,
  POSITION_OPTIONS,
  FONT_OPTIONS,
}) => {
  return (
    <div className="xx-title-style-section">
      <h4 className="xx-section-subtitle">标题样式</h4>

      {/* 位置 + 字体 一行 */}
      <div className="xx-title-style-row">
        <div className="xx-form-field xx-half-field">
          <label>位置</label>
          <select
            className="xx-form-select"
            value={settings.position}
            onChange={(e) => onUpdatePosition(e.target.value)}
          >
            {POSITION_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
        </div>
        <div className="xx-form-field xx-half-field">
          <label>字体</label>
          <select
            className="xx-form-select"
            value={settings.font}
            onChange={(e) => onUpdateFont(e.target.value)}
          >
            {FONT_OPTIONS.map((f) => (
              <option key={f} value={f}>
                {f}
              </option>
            ))}
          </select>
        </div>
      </div>

      {/* 字号滑块 */}
      <div className="xx-form-field">
        <div className="xx-field-label-row">
          <label>字号</label>
          <span className="xx-field-value">{settings.size}px</span>
        </div>
        <input
          className="xx-slider"
          type="range"
          min={12}
          max={128}
          value={settings.size}
          onChange={(e) => onUpdateSize(Number(e.target.value))}
        />
      </div>

      {/* 预设样式 */}
      <div className="xx-form-field">
        <label>预设样式</label>
        <TitlePresetsGrid
          presets={titlePresets}
          activePreset={activePreset}
          onApply={onApplyPreset}
          fontFamily={settings.font}
        />
      </div>

      {/* 样式按钮：粗体/斜体/描边/阴影 */}
      <div className="xx-form-field">
        <label>样式</label>
        <div className="xx-style-btns">
          <button
            className={`xx-style-btn ${settings.bold ? "active" : ""}`}
            onClick={onToggleBold}
            title="粗体"
          >
            <b>B</b>
          </button>
          <button
            className={`xx-style-btn ${settings.italic ? "active" : ""}`}
            onClick={onToggleItalic}
            title="斜体"
          >
            <i>I</i>
          </button>
          <button
            className={`xx-style-btn ${settings.stroke ? "active" : ""}`}
            onClick={onToggleStroke}
            title="描边"
          >
            S
          </button>
          <button
            className={`xx-style-btn ${settings.shadow ? "active" : ""}`}
            onClick={onToggleShadow}
            title="阴影"
          >
            ☁
          </button>
        </div>
      </div>
    </div>
  )
}

export default TitleStylePanel