"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect, useCallback } from "react";
import { Search, X } from "lucide-react";
import { Input } from "../../ui/input";
import { Button } from "../../ui/button";
import { cn } from "../../../lib/utils";
function SearchInput({
  value,
  onChange,
  placeholder = "Search...",
  debounceMs = 300,
  className,
  "data-cy": dataCy
}) {
  const [localValue, setLocalValue] = useState(value);
  useEffect(() => {
    setLocalValue(value);
  }, [value]);
  useEffect(() => {
    const timer = setTimeout(() => {
      if (localValue !== value) {
        onChange(localValue);
      }
    }, debounceMs);
    return () => clearTimeout(timer);
  }, [localValue, debounceMs, onChange, value]);
  const handleClear = useCallback(() => {
    setLocalValue("");
    onChange("");
  }, [onChange]);
  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
    /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
    /* @__PURE__ */ jsx(
      Input,
      {
        type: "text",
        value: localValue,
        onChange: (e) => setLocalValue(e.target.value),
        placeholder,
        className: "pl-10 pr-10",
        "data-cy": dataCy
      }
    ),
    localValue && /* @__PURE__ */ jsxs(
      Button,
      {
        type: "button",
        variant: "ghost",
        size: "sm",
        className: "absolute right-1 top-1/2 transform -translate-y-1/2 h-7 w-7 p-0",
        onClick: handleClear,
        "data-cy": dataCy ? `${dataCy}-clear` : void 0,
        children: [
          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Clear search" })
        ]
      }
    )
  ] });
}
export {
  SearchInput
};
