Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } 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

  const actions = useMemo(() => {
    const options = []

    if (link_delete) {
      options.push({
        label: 'Borrar',
        action: () => onDelete(comment)
      })
    }

    if (link_abuse_report) {
      options.push({
        label: 'Reportar',
        action: () => onReport(link_abuse_report)
      })
    }

    return options
  }, [link_delete, link_abuse_report])

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

        <Options options={actions} />
      </CommentHeader>

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