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='body2'>{time_elapsed}</Typography>
        </CommentInfo>

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

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