Proyectos de Subversion LeadersLinked - SPA

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

import { parse } from '@utils';

import { Card, CardContent } from '@shared/components';
import { CapsuleRating } from '.';

export function CapsuleDetail({
  capsule: { name, description, image, total_rating },
  readOnly = false
}) {
  const totalRating = Number(total_rating);
  return (
    <Card>
      <CardContent>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
          <Avatar sx={{ width: 60, height: 60 }} src={image} />

          <Box>
            <Typography variant='h2'>{name}</Typography>
            <Typography>{parse(description)}</Typography>
            <CapsuleRating readOnly={readOnly} defaultValue={totalRating} sx={{ mt: 0.5 }} />
          </Box>
        </Box>
      </CardContent>
    </Card>
  );
}