"use client";

import { Search, X } from "lucide-react";
import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
import { cn } from "./cn";

export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
  value: string;
  onChange: (v: string) => void;
  onClear?: () => void;
  size?: "sm" | "md" | "lg";
  trailing?: ReactNode;
  wrapperClassName?: string;
  loading?: boolean;
}

export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(function SearchInput({ value, onChange, onClear, size = "md", trailing, className, wrapperClassName, loading, ...rest }, ref) {
  const h = size === "lg" ? "h-12 text-[15px]" : size === "sm" ? "h-10 text-[13px] sm:h-9" : "h-10 text-[14px]";
  return (
    <div className={cn("relative flex items-center rounded-sm border border-hair-2 bg-surface text-ink focus-within:border-ink", h, wrapperClassName)}>
      <Search className={cn("ml-3 shrink-0 text-ink-3", size === "lg" ? "size-[18px]" : "size-4", loading && "animate-pulse-soft")} strokeWidth={1.75} aria-hidden />
      <input
        ref={ref}
        type="search"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        autoComplete="off"
        spellCheck={false}
        className={cn("h-full min-w-0 flex-1 bg-transparent px-2.5 outline-none placeholder:text-ink-4", className)}
        {...rest}
      />
      {value && (
        <button
          type="button"
          aria-label="Clear search"
          onClick={() => {
            onChange("");
            onClear?.();
          }}
          className="mr-1 inline-flex size-8 items-center justify-center rounded-xs text-ink-3 hover:text-ink"
        >
          <X className="size-4" />
        </button>
      )}
      {trailing && <div className="mr-2 flex shrink-0 items-center gap-1">{trailing}</div>}
    </div>
  );
});