import styled from 'styled-components';

const ModalBg = styled.div`
	position: fixed;
	background: ${props => props.$bgcolor || 'rgba(0, 0, 0, 0.5)'};
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	min-width: 1080px;
	display: ${props => (props.$view === 'hidden' ? 'none' : 'block')};
	z-index: 20;
`;

const ModalWrapper = styled.div`
	position: absolute;
	background: #fff;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	min-width: ${props => props.min || 'auto'};
	padding: ${props => props.$padding || '30px'};
	border-radius: 30px;
	max-height: 90%;
	overflow: auto;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
`;

const Modal = ({ children, $padding, min, $view, $bgcolor }) => {
	return (
		<>
			<ModalBg $view={$view} $bgcolor={$bgcolor}>
				<ModalWrapper $padding={$padding} min={min}>
					{children}
				</ModalWrapper>
			</ModalBg>
		</>
	);
};

export default Modal;