// @design-system: primitives/SearchInput
import { forwardRef } from 'react';
import { Input, type InputProps } from '@/components/ui/primitives/Input';
import { Icon } from '@/components/ui/icons/Icon';

/** InputProps minus type (locked to "search") and startSlot (locked to Search icon). */
export type SearchInputProps = Omit<InputProps, 'type' | 'startSlot'>;

/**
 * Search-flavoured Input: type="search" + Search icon pre-wired.
 * Ref-forwardable. All other InputProps pass through.
 *
 * @example
 * ```tsx
 * <SearchInput
 *   placeholder={t('search_placeholder')}
 *   value={query}
 *   onChange={(e) => setQuery(e.target.value)}
 *   aria-label={t('search_placeholder')}
 * />
 * ```
 */
export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
  function SearchInput(props, ref) {
    return (
      <Input ref={ref} type="search" startSlot={<Icon name="Search" size="sm" />} {...props} />
    );
  },
);