import clsx from "clsx";
import { FeatherSearch } from "@subframe/core";
import { useTranslation } from "react-i18next";
import { cn } from "~/lib/utils";
import { Button } from "../button";

interface Props {
  size?: "xs" | "sm" | "md";
  onClick: () => void;
  className?: string;
  placeholder?: string;
}

// Subframe migration (strangler shim): this is NOT an editable field — it is a button
// styled like a search box that triggers `onClick` (e.g. opens a search modal/palette).
// It therefore maps to the already-migrated Subframe `Button` shim (variant="outline")
// rather than Subframe's TextInput/SearchInput. The inline SVG is replaced by the
// design-system FeatherSearch icon. Public API (size/onClick/className/placeholder) is
// preserved exactly. See docs/subframe/COMPONENT-MAPPING.md.
export default function InputSearchButton({ size = "md", onClick, className, placeholder }: Props) {
  const { t } = useTranslation();
  return (
    <div className={clsx("flex justify-between space-x-2")}>
      <div className="relative flex w-full flex-auto items-center justify-center">
        <div className="text-muted-foreground pointer-events-none absolute inset-y-0 flex items-center justify-center focus-within:z-10 lg:left-0 lg:pl-3">
          <FeatherSearch className={cn(size === "xs" && "size-2", size === "sm" && "size-3.5", size === "md" && "size-4")} />
        </div>
        <Button
          type="button"
          onClick={onClick}
          variant="outline"
          className={cn(
            "text-muted-foreground w-full justify-start text-left font-normal",
            className,
            size === "xs" && "h-7 text-xs lg:pl-8",
            size === "sm" && "h-8 text-sm lg:pl-8",
            size === "md" && "lg:pl-9"
          )}
        >
          <span className="hidden text-xs lg:flex">{placeholder ?? t("shared.searchDot")}</span>
        </Button>
      </div>
    </div>
  );
}