Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Link } from 'react-router-dom';
import { Box, Button, styled, Typography } from '@mui/material';
import NavigateNext from '@mui/icons-material/NavigateNext';

import { Card, CardContent } from '@shared/components';
import { parse } from '@shared/utils';

const CardImage = styled('img')(({ theme }) => ({
  borderRadius: theme.shape.borderRadius,
  maxWidth: 100,
  aspectRatio: '1/1.5',
  objectFit: 'cover'
}));

export function LastCapsuleProgressCard({
  capsule: { name, description, image, completed, uuid }
}) {
  return (
    <Card>
      <CardContent>
        <Box
          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 0.5 }}
        >
          <Box>
            <Typography variant='caption'>{completed ? 'Completa' : 'En curso'}</Typography>
            <Typography variant='h2'>{name}</Typography>
            <Typography>{parse(description)}</Typography>

            <Button LinkComponent={Link} to={`/microlearning/capsules/${uuid}/slides`}>
              Ver cápsula
              <NavigateNext fontSize='small' />
            </Button>
          </Box>

          <CardImage src={image} alt={name} />
        </Box>
      </CardContent>
    </Card>
  );
}