Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useSelector } from 'react-redux';
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: {
    last_answer_on = '',
    added_on = '',
    user_name = '',
    user_image = '',
    title = '',
    description = '',
    categories = [],
    views = 0,
    answers = 0,
    reactions = 0,
    comments = 0
  },
  onEdit,
  onDelete,
  onReply,
  onView
}) {
  const labels = useSelector(({ intl }) => intl.labels);

  return (
    <Card sx={{ cursor: onView ? 'pointer' : 'default' }} onClick={onView}>
      <CardHeader
        avatar={user_image}
        title={user_name}
        renderAction={() => (
          <Menu>
            {onDelete && <Menu.Item onClick={onDelete}>Borrar</Menu.Item>}
            {onEdit && <Menu.Item onClick={onEdit}>Editar</Menu.Item>}
            {onReply && <Menu.Item onClick={onReply}>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>
  );
}