import clsx from "clsx";

import { Button, Icon, IconName, TextInput, TextInputProps } from "..";

import styles from "./SearchInput.module.scss";

type SearchInputProps = Omit<TextInputProps, "type">;

export default function SearchInput({ ...props }: SearchInputProps) {
  return (
    <TextInput
      placeholderDisplayMode="placeholder"
      placeholder={props.placeholder}
      {...props}
      className={clsx(props.className, styles.searchInput)}
      containerClassName={clsx(
        props.containerClassName,
        styles.searchInputContainer
      )}
    >
      <Button className={styles.searchButton}>
        <Icon name={IconName.Search} />
      </Button>
    </TextInput>
  );
}
