import { SearchIcon } from 'lucide-react';
import { cn } from '#/lib/utils.js';

/** A controlled search input with a leading icon. */
export function SearchField({ value, onChange, placeholder, className }) {
  return (
    <div className={cn('relative', className)}>
      <SearchIcon className="pointer-events-none absolute top-1/2 left-3.5 size-4 -translate-y-1/2 text-faint" />
      <input
        type="search"
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        className="h-11 w-full rounded-xl border border-input bg-transparent pr-3.5 pl-10 text-base text-foreground shadow-xs outline-none transition-colors placeholder:text-faint focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 md:text-sm"
      />
    </div>
  );
}