import styled from 'styled-components';
import { motion, AnimatePresence } from 'framer-motion';
import { Modal as AntModal } from 'antd';

// 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 ModalBg = styled(motion.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;
    overflow-y: auto; 
    overflow-x: auto;
`;

const ModalContainer = styled.div`
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
`;

const ModalWrapper = styled(motion.div)`
    background: #fff;
    min-width: ${props => props.min || 'auto'};
    padding: ${props => props.$padding || '30px'};
    border-radius: 30px;
    max-height: calc(100vh - 40px);
    overflow: auto;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
	
	/*모바일*/
    @media (max-width: 768px) {
        min-width: unset;
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        padding: ${props => props.$padding || '20px'};
        border-radius: 20px;
    }
`;

const Modal = ({ children, $padding, min, $view, $bgcolor }) => {
	const isVisible = $view !== 'hidden';

	return (
		<>
			<AnimatePresence>
				{isVisible && (
					<ModalBg
						$bgcolor={$bgcolor}
						initial={{ opacity: 0 }}
						animate={{ opacity: 1 }}
						exit={{ opacity: 0 }}
						transition={{ duration: 0.3 }}
					>
						<ModalContainer>
							<ModalWrapper
								$padding={$padding}
								min={min}
								initial={{ scale: 0.9, opacity: 0 }}
								animate={{ scale: 1, opacity: 1 }}
								exit={{ scale: 0.9, opacity: 0 }}
								transition={{
									type: "spring",
									stiffness: 300,
									damping: 30
								}}
							>
								{children}
							</ModalWrapper>
						</ModalContainer>
					</ModalBg>
				)}
			</AnimatePresence>
		</>
	);
};

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

export default Modal;