Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Box } from '@mui/material'
import { CheckCircle } from '@mui/icons-material'
import parse from 'html-react-parser'

import SlideQuiz from './slide-quiz'

export default function SlideCard({
  slide,
  completed,
  autoPlay = false,
  onComplete
}) {
  const { type, file, description, name, quiz_data, link_take_a_test } = slide

  const filesRender = {
    video: (
      <video
        autoPlay={autoPlay}
        controls
        controlsList='nodownload'
        onEnded={onComplete}
      >
        <source src={file} />
      </video>
    ),

    image: <img src={file} alt={name} />,

    audio: <audio controls src={file} alt={name} onEnded={onComplete} />,

    text: parse(description),

    document: (
      <a href={file} target='_blank' rel='noreferrer'>
        <img className='pdf' src='/images/extension/pdf.png' alt='pdf' />
      </a>
    ),

    quiz: (
      <SlideQuiz
        quiz={quiz_data ? quiz_data[0] : {}}
        startUrl={link_take_a_test}
        slide={slide}
        onSync={onComplete}
        completed={completed}
      />
    )
  }

  return (
    <Box
      sx={{
        width: '100%',
        minwidth: { xs: '80vw', md: '500px', lg: '800px' },
        overflow: 'hidden',
        borderRadius: '20px',
        position: 'relative',
        '& > svg': {
          position: 'absolute',
          top: '1rem',
          right: '1rem'
        },
        '& img, & video': {
          margin: 'auto',
          width: { xs: '80vw', md: '500px', lg: '800px' },
          maxHeight: '500px',
          objectFit: 'contain'
        },
        '& > img, & > video, & > audio, & > a, & > p': {
          margin: 'auto'
        }
      }}
    >
      {filesRender[type]}
      {completed ? <CheckCircle color='success' /> : null}
    </Box>
  )
}