Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'

import { getMonthName } from '../../utils/dates'

import EditIcon from '@mui/icons-material/Edit'

import DeleteIcon from '@mui/icons-material/Delete'

import IconButton from '@mui/material/IconButton'

import ConfirmModal from '../modals/ConfirmModal'

const Experience = ({ experience, onDelete, onEdit, isEdit }) => {

  const [isShow, setIsShow] = useState(false)

  const toggleConfirmModal = () => {

    setIsShow(!isShow)

  }

  return (

    <>

      <div className="experience-item">

        <div className="experience-item-header">

          <h3>{experience.company}</h3>

          {isEdit && (

            <div className="icon-buttons-group">

              <IconButton onClick={() => onEdit(experience.link_edit)}>

                <EditIcon />

              </IconButton>

              <IconButton onClick={toggleConfirmModal}>

                <DeleteIcon />

              </IconButton>

            </div>

          )}

        </div>

        <h4>{experience.title}</h4>

        <p>

          {`${getMonthName(experience.from_month)} ${experience.from_year} - ${

            experience.is_current === 'y'

              ? 'Actual'

              : `${getMonthName(experience.to_month)} ${experience.to_year}`

          }`}

        </p>

        <p>{`${experience.industry.name || experience.industry} / ${

          experience.size

        }`}</p>

        <p>{experience.formatted_address}</p>

        {experience.description && (

          <p dangerouslySetInnerHTML={{ __html: experience.description }}></p>

        )}

      </div>

      <ConfirmModal

        show={isShow}

        onClose={toggleConfirmModal}

        onAccept={() => onDelete(experience.link_delete)}

      />

    </>

  )

}

export default Experience