Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Typography } from '@mui/material';
import { CheckCircle } from '@mui/icons-material';

import { parse } from '@shared/utils';
import { Card, CardContent, CardMedia } from '@shared/components';
import SlideQuiz from './slide-quiz';

export function SlideCard({
  slide: { type, file, description, name, quiz_data, link_take_a_test },
  completed,
  autoPlay = false,
  onComplete
}) {
  return (
    <Card
      styles={{
        width: { xs: '80vw', md: '500px', lg: '800px' },
        maxHeight: '600px'
      }}
    >
      <CardContent styles={{ position: 'relative' }}>
        {!!completed && (
          <CheckCircle sx={{ position: 'absolute', top: '1rem', right: '1rem' }} color='success' />
        )}
        {type === 'quiz' && (
          <SlideQuiz
            quiz={quiz_data ? quiz_data[0] : {}}
            startUrl={link_take_a_test}
            slide={{ type, file, description, name, quiz_data, link_take_a_test }}
            onSync={onComplete}
            completed={completed}
          />
        )}
        {type === 'text' && <Typography>{parse(description)}</Typography>}
        {type === 'image' && (
          <CardMedia
            styles={{ width: '100%', height: '100%', objectFit: 'contain' }}
            src={file}
            alt={name}
            type='image'
          />
        )}
        {type === 'video' && (
          <CardMedia
            styles={{ width: '100%', height: '100%', objectFit: 'contain' }}
            src={file}
            alt={name}
            type='video'
            autoPlay={autoPlay}
            controls
            controlsList='nodownload'
            onEnded={onComplete}
          />
        )}
        {/*  {type === 'audio' && <CardMedia src={file} alt={name} type='audio' />}
        {type === 'document' && <CardMedia src={file} alt={name} type='document' />} */}
      </CardContent>
    </Card>
  );
}