Proyectos de Subversion LeadersLinked - 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'
import VisibilityIcon from '@mui/icons-material/Visibility'
import GroupIcon from '@mui/icons-material/Group'
import ShareIcon from '@mui/icons-material/Share'

const StyledEntity = styled.article`
  background-color: var(--bg-color);
  border-radius: var(--border-radius);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  position: relative;
  width: 100%;
`

const EntityHeader = styled.div`
  align-items: center;
  display: flex;
  gap: 0.5rem;
`

const EntityInfo = styled.div`
  align-items: center;
  display: flex;
  flex-direction: column;
`

const EntityStats = styled.ul`
  align-items: center;
  display: flex;
  gap: 0.5rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
`

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

      <EntityStats>
        {!company_name && !!common_connection && (
          <li>
            <p>
              <ShareIcon />
              {view_common_connection && (
                <small className='ml-2'>{common_connection} comunes</small>
              )}
            </p>
          </li>
        )}
        {!!followers && (
          <li>
            <p>
              <GroupIcon />
              <small className='ml-2'>{followers}</small>
            </p>
          </li>
        )}
        {!!views && (
          <li>
            <p>
              <VisibilityIcon />
              <small className='ml-2'>{views}</small>
            </p>
          </li>
        )}
      </EntityStats>
      {description && parse(description)}
      {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>
      )}
    </StyledEntity>
  )
}

export default SearchItem