import { motion } from 'framer-motion';
import React from 'react';
import styled from 'styled-components';

interface ModalProps {
  children: React.ReactNode;
}

function Modal(props: ModalProps) {
  return (
    <Backdrop
      {...(props as any)}
      layout
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      {props.children}
    </Backdrop>
  );
}

const Backdrop = styled(motion.div)`
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 500;

  background-color: rgba(51, 51, 51, 0.3);
  backdrop-filter: blur(1px);
`;

export default styled(Modal)``;
