Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Typography } from '@mui/material'
import { Delete, Edit, OpenInNew } from '@mui/icons-material'

import { parse } from '@app/utils'

import Widget from '@components/UI/Widget'
import Button from '@components/UI/buttons/Buttons'

export default function KnowledgeCard({ knowledge, onEdit, onDelete }) {
  const {
    link_delete,
    link_view,
    link_edit,
    category,
    description,
    image,
    title
  } = knowledge
  const labels = useSelector(({ intl }) => intl.labels)
  const navigate = useNavigate()

  return (
    <Widget>
      <Widget.Media height={200} src={image} alt={`${title} image`} />

      <Widget.Body>
        <Typography variant='h2'>{title}</Typography>
        <Typography variant='overline'>{category}</Typography>
        <Typography>{parse(description)}</Typography>
      </Widget.Body>

      <Widget.Actions>
        {link_view && (
          <Button onClick={() => navigate(link_view)}>
            <OpenInNew />
            {labels.view}
          </Button>
        )}
        {link_edit && (
          <Button onClick={() => onEdit(link_edit)}>
            <Edit />
            {labels.edit}
          </Button>
        )}
        {link_delete && (
          <Button onClick={() => onDelete(link_delete)}>
            <Delete />
            {labels.delete}
          </Button>
        )}
      </Widget.Actions>
    </Widget>
  )
}