Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { styled, Typography } from '@mui/material';
import { Link } from 'react-router-dom';
import Options from '@components/UI/Option';

const CommentContainer = styled('div')(({ theme }) => ({
  backgroundColor: '#ccc',
  borderRadius: theme.shape.borderRadius,
  display: 'flex',
  flexDirection: 'column',
  flexGrow: 1,
  gap: theme.spacing(0.5),
  padding: theme.spacing(0.5),
  position: 'relative'
}));

const CommentHeader = styled('div')(({ theme }) => ({
  display: 'flex',
  justifyContent: 'space-between',
  gap: theme.spacing(0.5)
}));

const CommentInfo = styled(Link)(() => ({
  display: 'flex',
  flexDirection: 'column'
}));

export default function CommentItem({ comment, onDelete, onReport }) {
  const {
    user_url,
    user_name,
    time_elapsed,
    comment: content,
    link_delete,
    link_abuse_report
  } = comment;

  return (
    <CommentContainer>
      <CommentHeader>
        <CommentInfo to={user_url}>
          <Typography variant='h3'>{user_name}</Typography>
          <Typography variant='overline'>{time_elapsed}</Typography>
        </CommentInfo>

        <Options>
          {link_delete ? (
            <Options.Item onClick={() => onDelete(comment)}>Borrar</Options.Item>
          ) : null}
          {link_abuse_report ? (
            <Options.Item onClick={() => onReport(link_abuse_report)}>Reportar</Options.Item>
          ) : null}
        </Options>
      </CommentHeader>

      <Typography>{content}</Typography>
    </CommentContainer>
  );
}