Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useNavigate } from 'react-router-dom';

import { Button } from '@mui/material';

import { useSlide } from '@microlearning/hooks';

import { Spinner } from '@shared/components';

import { CapsuleSuccessFeedback, SlideCard } from '.';

export function SlideForm({ topicUuid = '', slideUuid = '', autoPlay = false }) {

  const navigate = useNavigate();

  const { slide, loading: slideLoading, handleMarkSlideCompleted } = useSlide(topicUuid, slideUuid);

  if (slideLoading || !slide) {

    return <Spinner />;

  }

  if (slide.completed) {

    return (

      <CapsuleSuccessFeedback

        text='¡Felicidades! Has completado la lección.'

        onConfirm={() => navigate('/microlearning')}

      />

    );

  }

  return (

    <>

      <SlideCard

        completed={slide.completed}

        slide={slide}

        autoPlay={autoPlay}

        onComplete={() => handleMarkSlideCompleted(slide.uuid)}

      />

      {slide.type !== 'quiz' && (

        <Button

          color='primary'

          disabled={slide.completed}

          onClick={() => handleMarkSlideCompleted(slide.uuid)}

          sx={{ mt: 2 }}

        >

          Marcar como completado

        </Button>

      )}

    </>

  );

}