Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import { Avatar } from '@mui/material'
import { Link } from 'react-router-dom'
import parse from 'html-react-parser'
import { useSelector } from 'react-redux'
import styled from 'styled-components'
import EditIcon from '@mui/icons-material/Edit'
import DeleteIcon from '@mui/icons-material/Delete'

import {
  QuestionActions,
  QuestionDetails,
  QuestionStats,
  QuestionUserInfo,
  StyledQuestionCard,
} from './QuestionCard'
import CommentSection from '../feed/CommentSection'
import ReactionsButton from '../UI/buttons/ReactionsButton'

const AnswerActions = styled(QuestionActions)`
  margin-bottom: 0.5rem;
`

const AnswerCard = ({
  // unique = '',
  // uuid = '',
  // question_uuid = '',
  time_elapsed = '',
  user_image = '',
  user_url = '',
  user_name = '',
  text = '',
  reaction = '',
  total_comments = 0,
  total_reactions = 0,
  comments = [],
  link_edit = '',
  link_delete = '',
  link_reaction_delete = '',
  link_save_reaction = '',
  link_add_comment = '',
  onEdit = () => {},
  onDelete = () => {},
}) => {
  const labels = useSelector(({ intl }) => intl.labels)

  return (
    <>
      <StyledQuestionCard>
        <QuestionDetails>
          <QuestionUserInfo>
            <Link to={user_url}>
              <Avatar
                src={user_image}
                alt={`${user_name} profile image`}
                sx={{ width: '50px', height: '50px' }}
              />
            </Link>
            <p>{user_name}</p>
          </QuestionUserInfo>

          <QuestionStats className="mb-2">
            <span>{`${labels.published} ${time_elapsed}`}</span>
            <span>{`${total_reactions} ${labels.reactions}`}</span>
            <span>{`${total_comments} ${labels.comments}`}</span>
          </QuestionStats>
        </QuestionDetails>
        {text && parse(text)}

        <AnswerActions>
          {link_edit && (
            <button
              className="btn feed__share-option"
              onClick={() => onEdit(link_edit, text)}
            >
              <EditIcon />
              {labels.edit}
            </button>
          )}
          {link_delete && (
            <button
              className="btn feed__share-option"
              onClick={() => onDelete(link_delete)}
            >
              <DeleteIcon />
              {labels.delete}
            </button>
          )}
          {link_save_reaction && (
            <ReactionsButton
              className="btn feed__share-option"
              currentReaction={reaction}
              saveUrl={link_save_reaction}
              deleteUrl={link_reaction_delete}
              withLabel
            />
          )}
        </AnswerActions>
        <CommentSection
          addUrl={link_add_comment}
          currentComments={comments}
          isShow
        />
      </StyledQuestionCard>
    </>
  )
}

export default AnswerCard