import React, {useRef} from "react";
import styled from "styled-components";
import {Col, Row} from "react-bootstrap";
import Card from "components/Card/Card.jsx";

const Wrapper = styled.div`
  display: flex;
  align-items: center;  
  justify-content: center;
  color: #333333;
  text-align: center;
`;

const EmptyImage = styled.img`
  max-width: 100%;
  height: auto !important;
`;

const SearchButton = (props) => {
  return (
    <Card
      content={
        <Row>
          <Col md={8} mdOffset={2}>
            <EmptyImage src="https://raw.githubusercontent.com/devSoyoung/whale-extension-keycrab/master/images/empty.png" alt="empty"/>
          </Col>
          <Col md={12}>
            <Wrapper>
              {
                Number(props.userId)<0
                  ? <div>검색 결과가 존재하지 않습니다.</div>
                  : <div>전화번호, 이메일, 사용자ID를 통해<br/>사용자를 검색해보세요!</div>
              }
            </Wrapper>
          </Col>
        </Row>

      }
    />
  );
};

export default SearchButton;