import React from 'react';

import Button from '../Button';
import Portal from '../Portal';

import { Wrapper, InputWrapper, Input, ResultInfo, ArrowButton } from './styled';

type Props = {
  isActive?: boolean;
  close: () => void;
};

const Search: React.FunctionComponent<Props> = ({
  isActive = false,
  close,
}) => {
  return (
    <Portal>
      <Wrapper open={isActive}>
        <InputWrapper>
          <Input />
          <ResultInfo>2 of 14</ResultInfo>
        </InputWrapper>
        <ArrowButton variant="top" />
        <ArrowButton variant="bottom" />
        <Button appearance="primary" style={{marginLeft: '16px'}} onClick={close}>Close</Button>
      </Wrapper>
    </Portal>
  );
};

export default Search;
