Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Link } from 'react-router-dom';
import { styled } from '@mui/material';

import { parse } from '@utils';

import { CapsuleRating } from './UI';

const StyledCapsule = styled('article')`
  display: flex;
  border-bottom: 1px solid var(--border-primary);
  gap: 1rem;
  padding: 0.5rem;
  align-items: center;
  width: 100%;
  picture {
    width: 60px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
`;

const StyledCapsuleDescription = styled('div')`
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  overflow: hidden;
`;

export const CapsuleItem = ({
  capsule: { name, description, image, total_rating, uuid },
  readOnly = false
}) => {
  return (
    <Link to={`/microlearning/capsules/${uuid}`}>
      <StyledCapsule>
        <picture>
          <img src={image} alt={`${name} capsule image`} />
        </picture>

        <StyledCapsuleDescription>
          <h2>{name}</h2>
          {parse(description)}
          <CapsuleRating
            readOnly={readOnly}
            defaultValue={Number(total_rating)}
            size='small'
            sx={{ mt: 1 }}
          />
        </StyledCapsuleDescription>
      </StyledCapsule>
    </Link>
  );
};