import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { memo } from 'react';
import { Link } from 'react-router-dom';
import BasicPopup from './BasicPopup';

const bullets = [
  'Lorem ipsum rci egestas. Tortor nulla ac est nulla nisl ut.',
  'Lorem ipsum dolor sit amet consectetur.',
  'Lorem ipsum rci egestas. Tortor nulla ac est nulla nisl ut.',
  'Lorem ipsum dolor sit amet consectetur.',
  'Lorem ipsum dolor sit amet consectetur.',
  'Lorem ipsum dt amet consectetur. Duis massa vel estas. Tortor nulla ac est nulla nisl ut.',
  'Lorem ipsum dolor sit amet consectetur.',
];

function RegistrationPopup({ open, onClose }) {
  return (
    <BasicPopup
      className="flex max-w-[76vw] w-full h-[66vh] min-h-[600px] rounded-20"
      open={open}
      onClose={onClose}
    >
      <Box
        className="relative hidden md:flex flex-auto items-center justify-center h-full p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
        sx={{ backgroundColor: 'common.layout' }}
      >
        <svg
          className="absolute inset-0 pointer-events-none"
          viewBox="0 0 960 540"
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMax slice"
          xmlns="http://www.w3.org/2000/svg"
        >
          <Box
            component="g"
            sx={{ color: 'primary.light' }}
            className="opacity-20"
            fill="none"
            stroke="currentColor"
            strokeWidth="100"
          >
            <circle r="234" cx="266" cy="23" />
            <circle r="234" cx="790" cy="551" />
          </Box>
        </svg>
      </Box>
      <Box
        className="flex flex-col items-center px-60 pt-56"
        sx={{ backgroundColor: 'background.paper' }}
      >
        <Typography variant="h4" className="mb-52 text-4xl font-semibold">
          Lorem ipsum dolor sit amet consetur
        </Typography>
        <ul className="flex flex-col gap-10 mb-68">
          {bullets.map((bullet) => (
            <li className="bullet">{bullet}</li>
          ))}
        </ul>
        <Link
          className="w-full py-20 text-center text-xl text-primary-light font-semibold tracking-widest rounded-2xl bg-secondary-main shadow hover:shadow-hover hover:shadow-secondary-main ease-in-out duration-300"
          to="/sign-up"
        >
          Try for free
        </Link>
      </Box>
    </BasicPopup>
  );
}

export default memo(RegistrationPopup);
