import { Search } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * Search-icon input, extracted from the pattern originally inlined in
 * LeadsViewToggle. Token-based so it themes correctly in dark mode.
 */
export function SearchInput({
  className,
  containerClassName,
  ...props
}: React.InputHTMLAttributes<HTMLInputElement> & { containerClassName?: string }) {
  return (
    <div className={cn("relative", containerClassName)}>
      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
      <input
        type="text"
        className={cn(
          "w-full h-9 pl-9 pr-3 rounded-lg border border-border bg-card text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary transition-all duration-200",
          className
        )}
        {...props}
      />
    </div>
  );
}
