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

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

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

// eslint-disable-next-line react/prop-types
function Completed({ completed, skipped }) {
  return (
    <Stack className={styles.Root}>
      <Stack direction="row" justifyContent="space-between" className={styles.MetaRoot}>
        <Stack direction="row" alignItems="center" gap={2}>
          <CheckCircle fontSize="small" htmlColor="success.main" />
          <Typography variant="caption" color="text.primary">
            Successful
          </Typography>
        </Stack>
        <Stack>
          <Typography variant="caption" color="text.primary">
            {completed} videos
          </Typography>
        </Stack>
      </Stack>
      <Stack direction="row" justifyContent="space-between" className={styles.MetaRoot}>
        <Stack direction="row" alignItems="center" gap={2}>
          <RemoveCircle fontSize="small" htmlColor="info.main" />
          <Typography variant="caption" color="text.primary">
            Skipped
          </Typography>
        </Stack>
        <Stack>
          <Typography variant="caption" color="text.primary">
            {skipped} videos
          </Typography>
        </Stack>
      </Stack>
    </Stack>
  );
}

export default Completed;
