Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import parse from 'html-react-parser'
import { Modal } from 'react-bootstrap'
import EastIcon from '@mui/icons-material/East'

const AboutCompany = (companyInfo) => {
  const [showModal, setShowModal] = useState(false)

  const openModal = (e) => {
    e.preventDefault()
    setShowModal(true)
  }

  return (
    <>
      <div className="suggest__widget">
        <div className="linked__widget-header">
          <h3>Acerca de esta empresa</h3>
        </div>
        {companyInfo.overview ? (
          parse(companyInfo.overview)
        ) : (
          <p>Sin descripción</p>
        )}
        <a className="load__suggest" onClick={(e) => openModal(e)}>
          <span>Ver más</span>
          <EastIcon />
        </a>
      </div>
      <AboutCompany.Modal
        show={showModal}
        closeModal={() => setShowModal(false)}
        companyInfo={companyInfo}
      />
    </>
  )
}

const AboutModal = ({ show, closeModal, companyInfo }) => {
  const {
    companyName,
    companySize,
    facebook,
    foundationYear,
    industry,
    instagram,
    locations,
    overview,
    twitter,
    website,
  } = companyInfo
  return (
    <Modal show={show} onHide={closeModal}>
      <Modal.Header closeButton>
        <h2>Acerca de esta empresa</h2>
      </Modal.Header>
      <Modal.Body>
        <div className="description__label">
          <label htmlFor="name">Nombre</label>
          <p>{companyName}</p>
        </div>
        <div className="description__label">
          <label htmlFor="name">Descripción</label>
          {overview && parse(overview)}
        </div>
        <div className="description__label">
          <label htmlFor="name">Industria</label>
          <p>{industry}</p>
        </div>
        <div className="description__label">
          <label htmlFor="name">Año de fundación</label>
          <p>{foundationYear}</p>
        </div>
        <div className="description__label">
          <label htmlFor="name">Tamaño de la compañia</label>
          <p>{companySize}</p>
        </div>
        <div className="description__label">
          <label htmlFor="name">Facebook</label>
          <a href={facebook} target="_blank" rel="noreferrer">
            <p>{facebook}</p>
          </a>
        </div>
        <div className="description__label">
          <label htmlFor="name">Instagram</label>
          <a href={instagram} target="_blank" rel="noreferrer">
            <p>{instagram}</p>
          </a>
        </div>
        <div className="description__label">
          <label htmlFor="name">Twitter</label>
          <a href={twitter} target="_blank" rel="noreferrer">
            <p>{twitter}</p>
          </a>
        </div>
        <div className="description__label">
          <label htmlFor="name">Sitio web</label>
          <a href={website} target="_blank" rel="noreferrer">
            <p>{website}</p>
          </a>
        </div>
      </Modal.Body>
    </Modal>
  )
}

AboutCompany.Modal = AboutModal

export default AboutCompany