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: 80%;
`;

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 SearchButton = () => {
  return (
    <SearchButtonWrapper>
      <SearchInput type="text" className="form-control" placeholder={"킥보드 번호로 검색하기"}/>
      <ApplyButton><span>검색</span></ApplyButton>
    </SearchButtonWrapper>
  );
};

export default SearchButton;