import { styled } from 'styled-components';
import Button from '../../components/common/button/Button';

import { FormWrapper, InputLabel, TextInput, SelectInput, BtnWrapper } from '../../styles/Components';

const LandSearchBar = () => {
	return (
		<>
			<FormWrapper>
				<SearchbarStyle>
					<SearchItem>
						<InputLabel>랜드 조회</InputLabel>
						<TextInput type="text" width="300px" placeholder="랜드 ID를 입력하세요." />
					</SearchItem>
					<BtnWrapper $gap="8px">
						<Button theme="reset" />
						<Button
							theme="gray"
							text="검색"
							handleClick={e => {
								e.preventDefault();
							}}
						/>
					</BtnWrapper>
				</SearchbarStyle>
			</FormWrapper>
		</>
	);
};

export default LandSearchBar;

const SearchbarStyle = styled.div`
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 0;
	font-size: 14px;
	padding: 20px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	margin-bottom: 40px;
`;
const SearchItem = styled.div`
	display: flex;
	align-items: center;
	gap: 20px;
	margin-right: 50px;

	${TextInput}, ${SelectInput} {
		height: 35px;
	}
	${TextInput} {
		padding: 0 10px;
		max-width: 400px;
	}
`;
