// Example D extension — a NEW control written in the consuming project (3rd priority).
// Decision record: the package has no search component (MISSING). Its editable SWHeaderInput covers the
// text entry (Enter / blur commit, Escape cancel, IME), so it is reused; only the field surface and the
// search icon button are new. They read the public SW tokens (sw-search-control.css) — no copied
// package code, no hm-sw-* class, no new design values. Not registered as a package component.
import { SWHeaderInput } from "@hm-design/sw"
import "./sw-search-control.css"

export interface SWSearchControlProps {
  /** Committed query (host state). */
  value: string
  /** A new query was committed with Enter or by leaving the input. */
  onValueChange?: (value: string) => void
  /** Search with the current query (icon button or a committed query). */
  onSearch?: (query: string) => void
  label?: string
  disabled?: boolean
}

export function SWSearchControl({ value, onValueChange, onSearch, label = "검색", disabled }: SWSearchControlProps) {
  return (
    <div className="app-sw-search" role="search" data-disabled={disabled || undefined}>
      <span className="app-sw-search__text">
        <span className="app-sw-search__label" aria-hidden="true">{label}</span>
        <SWHeaderInput
          aria-label={`${label}어`}
          value={value}
          placeholder="객체 이름"
          disabled={disabled}
          onCommit={next => { onValueChange?.(next); onSearch?.(next) }}
        />
      </span>
      <button type="button" className="app-sw-search__button" aria-label={label} disabled={disabled} onClick={() => onSearch?.(value)}>
        <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
          <circle cx="7" cy="7" r="4.75" fill="none" stroke="currentColor" strokeWidth="1.5" />
          <path d="M10.5 10.5 14 14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      </button>
    </div>
  )
}