Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'
import { axios } from '../../../../utils'
import { getMonthName } from '../../../../utils/dates'
import parse from 'html-react-parser'
import EditIcon from '@mui/icons-material/EditOutlined'
import DeleteIcon from '@mui/icons-material/DeleteOutline'

import ConfirmationBox from '../../../UI/ConfirmBox'

const ExperienceCard = ({
  experience,
  isEdit = false,
  onEdit = () => {},
  onDelete = () => {},
}) => {
  const [isShowModal, setIsShowModal] = useState(false)

  const deleteExperience = () => {
    axios
      .post(experience.link_delete)
      .then(({ data: response }) => response.success && onDelete(response.data))
  }

  return (
    <div className="card__items">
      <div className="card__options-container">
        <h4>{experience.title}</h4>
        {isEdit && (
          <div className="card__options-icons position-relative">
            <button
              className="button-icon"
              onClick={() =>
                onEdit(
                  'Experiencia',
                  experience.link_edit,
                  experience.description || ' '
                )
              }
            >
              <EditIcon />
            </button>
            <button
              className="button-icon"
              onClick={() => setIsShowModal(true)}
            >
              <DeleteIcon />
            </button>
            <ConfirmationBox
              show={isShowModal}
              onClose={() => setIsShowModal(false)}
              onAccept={deleteExperience}
            />
          </div>
        )}
      </div>
      <p>{experience.company}</p>
      <span>{`${
        typeof experience.industry === 'object'
          ? experience.industry.name
          : experience.industry
      } / ${experience.size}`}</span>
      <span>
        {`${getMonthName(experience.from_month)} ${experience.from_year}`} -{' '}
        {experience.to_year
          ? `${getMonthName(experience.to_month)} ${experience.to_year}`
          : 'Actual'}
      </span>
      <p>{experience.formatted_adress}</p>
      {experience.description && parse(experience.description)}
    </div>
  )
}

export default ExperienceCard