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

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

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

const SearchButton = (props) => {
  const fallbackImg =  Number(props.userId)<0
    ? empty
    : search_user;

  return (
    <Card
      content={
        <Row>
          <Col md={8} mdOffset={2} sm={8} smOffset={2} xs={8} xsOffset={2} style={{display: 'flex', justifyContent: 'center'}}>
            <EmptyImage src={fallbackImg} alt="empty"/>
          </Col>
          <Col md={12} sm={12} xs={12}>
            <Wrapper>
              {
                Number(props.userId)<0
                  ? <div>검색 결과가 존재하지 않습니다.</div>
                  : <div>전화번호, 이메일, 사용자ID를 통해<br/>사용자를 검색해보세요!</div>
              }
            </Wrapper>
          </Col>
        </Row>

      }
    />
  );
};

export default SearchButton;