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;