Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import parse from 'html-react-parser'
import { styled } from 'styled-components'
import { Avatar } from '@mui/material'
import { Link } from 'react-router-dom'

const StyledEntity = styled.article`
  display: flex;
  flex-direction: column;
  padding: 1rem;
  width: 100%;
  border-radius: var(--border-radius);
  border-bottom: solid 1px var(--border-primary);
  border-top: solid 1px var(--border-primary);
  box-shadow: var(--light-shadow);
  background-color: var(--bg-color);
  gap: 0.5rem;
`

const SearchItem = ({
  name,
  industry,
  description,
  skills,
  common_connection,
  views,
  image,
  company_name,
  title,
  url,
  followers,
  company_size,
  view_common_connection,
}) => {
  return (
    <StyledEntity>
      <Avatar src={image} sx={{ width: '90px' }} />
      <Link to={url}>
        <h3>{title || name}</h3>
        {company_name && <h4>{company_name}</h4>}
        {company_size && <p>Empresa {company_size} </p>}
        {industry && <p>{industry}</p>}
      </Link>

      <div className="d-flex">
        <ul>
          {!company_name && common_connection && (
            <li>
              <p className="com text-gray">
                <i className="fas fa-share-alt" />
                {view_common_connection && (
                  <small className="ml-2">{common_connection} comunes</small>
                )}
              </p>
            </li>
          )}
          {followers && (
            <li>
              <p className="com text-gray">
                <i className="fas fa-users"></i>
                <small className="ml-2">{followers}</small>
              </p>
            </li>
          )}
          {views && (
            <li>
              <p className="com text-gray">
                <i className="fas fa-eye"></i>
                <small className="ml-2">{views}</small>
              </p>
            </li>
          )}
        </ul>
      </div>

      <div className="job_descp">
        {industry && <button className="btn btn-secondary">{industry}</button>}
        {description && (
          <div className="show-read-more">{parse(description)}</div>
        )}
        {skills && (
          <ul className="skill-tags">
            {Object.values(skills).map((skill, id) => (
              <li key={id}>
                <button title={skill} className="btn btn-tertiary">
                  {skill}
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>
    </StyledEntity>
  )
}

export default SearchItem