"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils/index.js";
import { Input } from "../ui/input.js";
import { Search } from "lucide-react";
import { forwardRef } from "react";
const SearchInput = forwardRef(
  ({ className, containerClassName, icon, "data-cy": dataCy = "search-input", ...props }, ref) => {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: cn("relative w-full", containerClassName),
        "data-cy": dataCy,
        children: [
          /* @__PURE__ */ jsx(
            "span",
            {
              className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none",
              "data-cy": `${dataCy}-icon`,
              children: icon || /* @__PURE__ */ jsx(Search, { className: "h-4 w-4" })
            }
          ),
          /* @__PURE__ */ jsx(
            Input,
            {
              ref,
              type: "search",
              className: cn("pl-10 h-10 rounded-lg", className),
              "data-cy": `${dataCy}-input`,
              ...props
            }
          )
        ]
      }
    );
  }
);
SearchInput.displayName = "SearchInput";
export {
  SearchInput
};
