import Avatar from '@mui/material/Avatar';
import AvatarGroup from '@mui/material/AvatarGroup';
import Box from '@mui/material/Box';

function LeftSideCanvas({ title, subtitle, text }) {
  return (
    <Box
      className="h-full min-h-screen relative hidden md:flex flex-auto items-center justify-center 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="196" cy="23" />
          <circle r="234" cx="790" cy="491" />
        </Box>
      </svg>

      <div className="z-10 relative w-full max-w-2xl">
        {title && <div className="text-7xl font-bold leading-none text-primary-light">{title}</div>}
        {subtitle && (
          <div className="mt-24 text-lg tracking-tight leading-6 text-common-disabled">
            {subtitle}
          </div>
        )}
        <div className="flex items-center mt-32">
          <AvatarGroup
            sx={{
              '& .MuiAvatar-root': {
                borderColor: 'common.layout',
              },
            }}
          >
            <Avatar src="assets/images/avatars/female-18.jpg" />
            <Avatar src="assets/images/avatars/female-11.jpg" />
            <Avatar src="assets/images/avatars/male-09.jpg" />
            <Avatar src="assets/images/avatars/male-16.jpg" />
          </AvatarGroup>

          {text && (
            <div className="ml-16 font-medium tracking-tight text-common-disabled">{text}</div>
          )}
        </div>
      </div>
    </Box>
  );
}

export default LeftSideCanvas;