import styled from 'styled-components';

import { BtnWrapper } from '../../styles/Components';
import Button from '../common/button/Button';

import Modal from '../../components/common/modal/Modal';
import CloseUrl from '../../assets/img/icon/icon-close.png';

const LoginModal = ({ stateModal, handleModal, errorText }) => {
	return (
		<Modal $view={stateModal} min="440px" $padding="40px">
			<BtnWrapper $justify="flex-end">
				<ButtonClose onClick={handleModal} />
			</BtnWrapper>
			<ModalText>{errorText}</ModalText>
			<Button text="확인" theme="primary" size="large" width="100%" handleClick={handleModal} />
		</Modal>
	);
};

export default LoginModal;

const ModalText = styled.div`
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
	padding: 10px 0 40px;
`;

const ButtonClose = styled.button`
	width: 16px;
	height: 16px;
	background: url(${CloseUrl}) 50% 50% no-repeat;
`;
