import { SearchIcon } from 'lucide-react';
import { Input } from '#/components/atoms/input.jsx';
import { cn } from '#/lib/utils.js';

/**
 * A text field that narrows a list as its reader types: the Input atom with
 * the glass drawn inside its left edge. The same field over a file tree, a
 * repository list or a diff, so a filter reads as a filter wherever it is.
 * @param {{value: string, onChange: (value: string) => void, placeholder: string, className?: string}} props
 */
export function SearchField({ value, onChange, placeholder, className }) {
  return (
    <div className={cn('relative min-w-0', className)}>
      <SearchIcon className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-faint" />
      <Input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        aria-label={placeholder}
        className="pl-8"
      />
    </div>
  );
}