import React from 'react';
import { Container, ScrollViewType } from 'components/layout';
import { TextField } from 'components/text-field';
import { SearchIcon } from 'icons';

export const Search: React.FC<SearchType> = ({
  width = 341,
  placeholder = 'Search spaces, messages, people, and more...',
}) => {
  return (
    <Container>
      <TextField
        shapeVariant="round"
        variant="plain"
        sizeVariant="extra-small"
        width={width}
        leftElement={<SearchIcon colorVariant="body" />}
        backgroundVariant="base"
        placeholder={placeholder}
      />
    </Container>
  );
};

type SearchType = ScrollViewType & SearchProps;

export interface SearchProps {
  width?: number;
  placeholder?: string;
}