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 OpenInNew from '@mui/icons-material/OpenInNew';
import Edit from '@mui/icons-material/Edit';

import { parse } from '@utils';

import Widget from '@components/UI/Widget';
import Button from '@components/UI/buttons/Buttons';
import Options from '@components/UI/Option';

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;
  }
`;

const QuestionCard = ({
  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 = '',
  onDelete = () => null,
  onEdit = () => null,
  onReply = () => null
}) => {
  const labels = useSelector(({ intl }) => intl.labels);
  const navigate = useNavigate();

  const onView = (url = '') => {
    navigate(url);
  };

  return (
    <Widget>
      <Widget.Header
        avatar={user_image}
        title={user_name}
        renderAction={() => (
          <Options>
            {link_delete && (
              <Options.Item onClick={() => onDelete(link_delete)}>Borrar</Options.Item>
            )}
          </Options>
        )}
      />

      <Widget.Body>
        <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>
      </Widget.Body>

      <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>

      <Widget.Actions>
        {link_view && (
          <Button onClick={() => onView(link_view)}>
            <OpenInNew />
            {labels.view}
          </Button>
        )}
        {link_edit && (
          <Button onClick={() => onEdit(link_edit)}>
            <Edit />
            {labels.edit}
          </Button>
        )}
        {link_answers_add && (
          <Button onClick={() => onReply(link_edit)}>
            <Edit />
            {labels.reply}
          </Button>
        )}
      </Widget.Actions>
    </Widget>
  );
};

export default QuestionCard;