Proyectos de Subversion LeadersLinked - SPA

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

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

import { Spinner } from '@shared/components';
import { CapsuleSuccessFeedback, SlideCard } from '.';

export function SlideForm({ topicUuid = '', slideUuid = '', autoPlay = false }) {
  const { slide, loading: slideLoading, handleMarkSlideCompleted } = useSlide(topicUuid, slideUuid);
  const { closeModal } = useModal();

  if (slideLoading || !slide) {
    return <Spinner />;
  }

  if (slide.completed) {
    return (
      <CapsuleSuccessFeedback
        text='¡Felicidades! Has completado la lección.'
        onConfirm={closeModal}
      />
    );
  }

  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>
      )}
    </>
  );
}