// Example D — existing Layer / Color components next to a NEW consumer control (SWSearchControl).
import { useState } from "react"
import { SWHeaderColorMenu, SWHeaderLayerMenu, SWTheme, type SWHeaderColorValue } from "@hm-design/sw"
import { colors, layers } from "./sample-data"
import { SWSearchControl } from "./SWSearchControl"
import "./example-layout.css"

export function ExampleDSearchExtension({ onEvent }: { onEvent?: (name: string) => void }) {
  const [activeLayerId, setActiveLayerId] = useState("0")
  const [color, setColor] = useState<SWHeaderColorValue>({ value: "ByLayer", swatch: "#ffffff" })
  const [query, setQuery] = useState("")
  return (
    <SWTheme className="app-sw-bar" role="banner" aria-label="검색 헤더">
      <div className="app-sw-surface" role="toolbar" aria-label="객체 찾기">
        <SWHeaderLayerMenu
          value={{ name: "0" }}
          layers={layers}
          activeLayerId={activeLayerId}
          onLayerSelect={layer => { setActiveLayerId(layer.id); onEvent?.(`layer:${layer.id}`) }}
        />
        <SWHeaderColorMenu
          value={color}
          colors={colors}
          onColorSelect={option => { setColor({ value: option.label ?? option.color, swatch: option.color }); onEvent?.(`color:${option.id}`) }}
        />
        <SWSearchControl value={query} onValueChange={setQuery} onSearch={text => onEvent?.(`search:${text}`)} />
      </div>
    </SWTheme>
  )
}