xiaoxia-saas/apps/web/src/components/asset-selector/SelectorToolbar.tsx

import React from "react"
import { Input, Select } from "@/components/ui"
import { TYPE_OPTIONS } from "./constants"
import { QUALITY_OPTIONS } from "@/api/template-editor"
import type { ViewMode } from "./types"

interface SelectorToolbarProps {
  searchText: string
  filterType: string
  filterQuality: string
  viewMode: ViewMode
  showQualityFilter: boolean
  onSearchChange: (value: string) => void
  onTypeChange: (value: string) => void
  onQualityChange: (value: string) => void
  onViewModeChange: (mode: ViewMode) => void
}

const SelectorToolbar: React.FC<SelectorToolbarProps> = ({
  searchText,
  filterType,
  filterQuality,
  viewMode,
  showQualityFilter,
  onSearchChange,
  onTypeChange,
  onQualityChange,
  onViewModeChange,
}) => {
  return (
    <div className="as-toolbar">
      <div className="as-toolbar-left">
        <div className="as-search">
          <Input
            placeholder="搜索素材..."
            value={searchText}
            onChange={(e) => onSearchChange(e.target.value)}
            prefix="🔍"
          />
        </div>
        <Select
          value={filterType}
          onChange={(v: string) => onTypeChange(v)}
          options={TYPE_OPTIONS}
        />
        {showQualityFilter && (
          <Select
            value={filterQuality}
            onChange={(v: string) => onQualityChange(v)}
            options={QUALITY_OPTIONS}
          />
        )}
      </div>
      <div className="as-toolbar-right">
        <button
          className={`as-view-btn${viewMode === "grid" ? " active" : ""}`}
          onClick={() => onViewModeChange("grid")}
          title="网格视图"
        >
          ⊞
        </button>
        <button
          className={`as-view-btn${viewMode === "list" ? " active" : ""}`}
          onClick={() => onViewModeChange("list")}
          title="列表视图"
        >
          ☰
        </button>
      </div>
    </div>
  )
}

export default SelectorToolbar