shoc-frontend-new/src/components/ui/search-input.tsx

import type { InputHTMLAttributes } from "react";
import { Search } from "lucide-react";

import { cn } from "@/lib/utils";

type SearchInputProps = Omit<
  InputHTMLAttributes<HTMLInputElement>,
  "value" | "onChange" | "type"
> & {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  className?: string;
  inputClassName?: string;
  fullWidth?: boolean;
  "aria-label"?: string;
};

export function SearchInput({
  value,
  onChange,
  placeholder = "Search…",
  className,
  inputClassName,
  fullWidth = false,
  "aria-label": ariaLabel = "Search",
  ...props
}: SearchInputProps) {
  return (
    <div className={cn("relative shrink-0", className)}>
      <Search
        size={13}
        aria-hidden
        className="pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-muted-foreground"
      />
      <input
        type="search"
        value={value}
        onChange={(event) => onChange(event.currentTarget.value)}
        placeholder={placeholder}
        aria-label={ariaLabel}
        className={cn(
          "box-border rounded-md border border-border bg-background py-1.5 pl-8 text-foreground focus:outline-none",
          fullWidth
            ? "w-full pr-2.5 text-[13px]"
            : "w-56 pr-7 font-sans text-[12px] placeholder:text-muted-foreground placeholder:opacity-100 hover:border-border-hover focus:border-border",
          inputClassName,
        )}
        {...props}
      />
    </div>
  );
}