import React from "react";
import styled from "styled-components";

const SearchButtonWrapper = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
`;

const SearchInput = styled.input`
  width: 60%;
`;

const ApplyButton = styled.div`
  width: 17%;
  background-color: #e7e7e7;
  border-radius: 4px;
  color: #565656;
  text-align: center;

  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
  background-color: #565656;
  color: white;
  cursor: pointer;
`;

const SelectBox = styled.select`
  width: 17%;
  color: #333333;
  border-color: #E3E3E3;
  border-radius: 4px;
`;


const SearchButton = () => {
  return (
    <SearchButtonWrapper>
      <SelectBox>
        <option value="전화 번호">전화 번호</option>
        <option value="이메일">이메일</option>
      </SelectBox>
      <SearchInput type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/>
      <ApplyButton><span>검색</span></ApplyButton>
    </SearchButtonWrapper>
  );
};

export default SearchButton;