Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Typography } from '@mui/material'

import { usePurposes } from '@hooks'

import Widget from '@components/UI/Widget'
import Options from '@components/UI/Option'
import ConfirmModal from '@components/modals/ConfirmModal'

export default function PurposeItem({
  purpose: { id, name, description, actions }
}) {
  const [show, setShow] = useState(false)
  const navigate = useNavigate()

  const { deletePurpose } = usePurposes()

  const toggleConfirmModal = () => setShow(!show)

  return (
    <Widget>
      <Widget.Header
        title={name}
        renderAction={() => (
          <Options>
            {actions.link_edit && (
              <Options.Item onClick={() => navigate(`edit/${id}`)}>
                Editar
              </Options.Item>
            )}
            {actions.link_delete && (
              <>
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
                <ConfirmModal
                  show={show}
                  onClose={toggleConfirmModal}
                  title='Borrar'
                  message='¿Estás seguro de que quieres borrar este propósito?'
                  onAccept={() => deletePurpose(id)}
                />
              </>
            )}
          </Options>
        )}
      />

      <Widget.Body>
        <Typography>{description}</Typography>
      </Widget.Body>
    </Widget>
  )
}