import { Search } from '@transferwise/icons';
import { forwardRef } from 'react';

import { Size } from '../common';
import { Merge } from '../utils';

import { Input } from './Input';
import { InputGroup } from './InputGroup';

export interface SearchInputProps extends Merge<
  React.ComponentPropsWithRef<'input'>,
  {
    size?: Size.SMALL | Size.MEDIUM;
    shape?: 'rectangle' | 'pill';
    'aria-invalid'?: boolean;
  }
> {}

export const SearchInput = forwardRef(function SearchInput(
  { shape = 'pill', size = Size.MEDIUM, disabled, className, ...restProps }: SearchInputProps,
  ref: React.ForwardedRef<HTMLInputElement | null>,
) {
  return (
    <InputGroup
      addonStart={{
        content: <Search size={size === Size.SMALL ? 16 : 24} />,
        initialContentWidth: size === Size.SMALL ? 16 : 24,
      }}
      disabled={disabled}
      className={className}
    >
      <Input
        ref={ref}
        role="searchbox"
        inputMode="search"
        shape={shape}
        size={size}
        {...restProps}
      />
    </InputGroup>
  );
});