Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { styled, Typography } from '@mui/material';

import { parse } from '@shared/utils';

import { Card, CardContent, CardHeader, Menu } from '@shared/components';

export const QuestionStats = styled('div')`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-around;
  padding: 5px;
`;

const QuestionCategories = styled('ul')`
  align-items: center;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  max-width: 200px;
  li {
    background: rgb(198, 209, 240);
    border-radius: var(--border-radius);
    color: var(--font-color);
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
  }
`;

export function QuestionCard({
  question = {},
  onEdit = () => {},
  onDelete = () => {},
  onReply = () => {}
}) {
  const labels = useSelector(({ intl }) => intl.labels);
  const navigate = useNavigate();

  const {
    last_answer_on = '',
    added_on = '',
    user_name = '',
    user_image = '',
    title = '',
    description = '',
    categories = [],
    views = 0,
    answers = 0,
    reactions = 0,
    comments = 0,
    link_view = '',
    link_edit = '',
    link_delete = '',
    link_answers_add = ''
  } = question;

  return (
    <Card sx={{ cursor: 'pointer' }} onClick={() => navigate(link_view)}>
      <CardHeader
        avatar={user_image}
        title={user_name}
        renderAction={() => (
          <Menu>
            {link_delete && <Menu.Item onClick={() => onDelete(link_delete)}>Borrar</Menu.Item>}
            {link_edit && <Menu.Item onClick={() => onEdit(question)}>Editar</Menu.Item>}
            {link_answers_add && (
              <Menu.Item onClick={() => onReply(link_edit)}>Responder</Menu.Item>
            )}
          </Menu>
        )}
      />

      <CardContent>
        <QuestionCategories>
          {categories.map((category) => (
            <li key={category}>{category}</li>
          ))}
        </QuestionCategories>

        <Typography variant='h2'>{title}</Typography>
        <Typography variant='overline'>{`${labels.my_coach_question} ${added_on}`}</Typography>
        {last_answer_on ? (
          <Typography variant='overline'>{`${labels.my_coach_last_answer} ${last_answer_on}`}</Typography>
        ) : null}
        <Typography>{parse(description)}</Typography>

        <QuestionStats>
          <Typography variant='overline'>{`${answers} ${labels.my_coach_answers}`}</Typography>
          <Typography variant='overline'>{`${reactions} ${labels.my_coach_reactions}`}</Typography>
          <Typography variant='overline'>{`${views} ${labels.my_coach_views}`}</Typography>
          <Typography variant='overline'>{`${comments} ${labels.comments}`}</Typography>
        </QuestionStats>
      </CardContent>
    </Card>
  );
}