Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Avatar, Box, IconButton, styled, Typography } from '@mui/material';
import { DeleteOutline } from '@mui/icons-material';

import { parse } from '@utils';

import { CapsuleRating } from './UI';
import { formatDate } from '@shared/utils';

const CommentContainer = styled(Box)`
  background-color: ${(props) => props.theme.background.color.primary};
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
`;

export const CapsuleComment = ({
  comment: { image, fullname, comment: content, rating, date, link_delete },
  onDelete
}) => {
  return (
    <CommentContainer>
      <Box display='flex' gap={1} alignItems='center'>
        <Avatar src={image} alt={fullname} sx={{ width: 60, height: 60 }} />

        <Box display='flex' flexDirection='column'>
          <Typography variant='h3'>{fullname}</Typography>
          <Typography>{parse(content)}</Typography>
          <CapsuleRating readOnly max={5} value={rating} size='small' />
        </Box>
      </Box>

      <Box display='flex' flexDirection='column' justifyContent='space-between' alignItems='end'>
        {link_delete && (
          <IconButton onClick={() => onDelete(link_delete)}>
            <DeleteOutline />
          </IconButton>
        )}

        <span>{formatDate(date)}</span>
      </Box>
    </CommentContainer>
  );
};