"use client";

import { Search, X } from "lucide-react";
import type { FormEvent } from "react";

/** 左图标、可清除、Enter 提交；加高壳层便于后台工具条点按 */
export default function AdminSearchField({
  value,
  onChange,
  onSubmit,
  onClear,
  placeholder,
  ariaLabel,
}: {
  value: string;
  onChange: (v: string) => void;
  onSubmit?: () => void;
  onClear?: () => void;
  placeholder?: string;
  ariaLabel: string;
}) {
  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    onSubmit?.();
  };

  const clear = () => {
    onChange("");
    onClear?.();
  };

  return (
    <form
      onSubmit={handleSubmit}
      className="admin-field-shell admin-search-shell relative flex-1 min-w-0"
      role="search"
    >
      <Search
        size={17}
        className="shrink-0 pointer-events-none"
        style={{ color: value ? "var(--accent)" : "var(--ink-3)" }}
        aria-hidden
      />
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        aria-label={ariaLabel}
        className="admin-field-input"
      />
      {value ? (
        <button
          type="button"
          onClick={clear}
          aria-label="清除搜索"
          className="w-7 h-7 inline-flex items-center justify-center rounded-full shrink-0 transition-colors hover:bg-[var(--panel-2)]"
          style={{ color: "var(--ink-3)" }}
        >
          <X size={15} />
        </button>
      ) : null}
    </form>
  );
}