Proyectos de Subversion LeadersLinked - SPA

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

import { parse } from '@utils'
import OpenInNewIcon from '@mui/icons-material/OpenInNew'
import EditIcon from '@mui/icons-material/Edit'
import DeleteIcon from '@mui/icons-material/Delete'
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew'

import WidgetWrapper from '../widgets/WidgetLayout'

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

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

  const goBack = () => {
    navigate('/my-coach')
  }

  return (
    <WidgetWrapper>
      <WidgetWrapper.Header image={user_image} title={user_name}>
        <QuestionCategories>
          {categories.map(({ category }) => (
            <li key={category}>{category}</li>
          ))}
        </QuestionCategories>
      </WidgetWrapper.Header>

      <WidgetWrapper.Body>
        <h2>{title}</h2>
        <span>{`${labels.my_coach_question} ${added_on}`}</span>
        {last_answer_on ? (
          <span>{`${labels.my_coach_last_answer} ${last_answer_on}`}</span>
        ) : null}
        <Typography>{parse(description)}</Typography>
      </WidgetWrapper.Body>

      <QuestionStats>
        <span>{`${answers} ${labels.my_coach_answers}`}</span>
        <span>{`${reactions} ${labels.my_coach_reactions}`}</span>
        <span>{`${views} ${labels.my_coach_views}`}</span>
        <span>{`${comments} ${labels.comments}`}</span>
      </QuestionStats>

      <WidgetWrapper.Actions>
        {link_answers && (
          <button onClick={goBack}>
            <ArrowBackIosNewIcon />
            {labels.back}
          </button>
        )}
        {link_view && (
          <button onClick={() => onView(link_view)}>
            <OpenInNewIcon />
            {labels.view}
          </button>
        )}
        {link_edit && (
          <button onClick={() => onEdit(link_edit)}>
            <EditIcon />
            {labels.edit}
          </button>
        )}
        {link_answers_add && (
          <button onClick={() => onReply(link_edit)}>
            <EditIcon />
            {labels.reply}
          </button>
        )}
        {link_delete && (
          <button
            className='btn feed__share-option'
            onClick={() => onDelete(link_delete)}
          >
            <DeleteIcon />
            {labels.delete}
          </button>
        )}
      </WidgetWrapper.Actions>
    </WidgetWrapper>
  )
}

export default QuestionCard