Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { Box, Typography } from '@mui/material'

import QuizTimer from './quiz-timer'

function SlideProgress({
  points,
  time,
  currentQuestion,
  totalQuestions,
  onTimeEnd
}) {
  return (
    <Box
      sx={{
        p: 2,
        pb: 0,
        width: '100%'
      }}
    >
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 2
        }}
      >
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          <Typography variant='overline'>{points}</Typography>
          <Typography variant='overline'>Puntos</Typography>
        </Box>

        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          <QuizTimer time={time} onStop={onTimeEnd} />
          <Typography variant='overline'>Tiempo</Typography>
        </Box>

        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center'
          }}
        >
          <Typography variant='overline'>{`${currentQuestion}/${totalQuestions}`}</Typography>
          <Typography variant='overline'>Preguntas</Typography>
        </Box>
      </Box>
    </Box>
  )
}

export default SlideProgress