import React from 'react';

import { LinearProgress, Stack, Typography } from '@/mui/components';

import styles from './Processing.module.scss';

// eslint-disable-next-line react/prop-types
function Processing({ progress, total }) {
  return (
    <Stack className={styles.Root}>
      <Stack className={styles.ProgressRoot}>
        <LinearProgress fullWidth variant="determinate" value={progress} color="info" />
      </Stack>
      <Stack direction="row" justifyContent="space-between" className={styles.MetaRoot}>
        <Stack>
          <Typography variant="caption" color="text.primary">
            {progress}% processed
          </Typography>
        </Stack>
        <Stack>
          <Typography variant="caption" color="text.primary">
            {total} videos
          </Typography>
        </Stack>
      </Stack>
    </Stack>
  );
}

export default Processing;
