Proyectos de Subversion LeadersLinked - SPA

import React, { useMemo } from 'react'
import { Link } from 'react-router-dom'
import { Avatar, Box, Typography } from '@mui/material'
import { Visibility, Group, Share } from '@mui/icons-material'

import { parse } from '@utils'

import TagsList from '../UI/TagsList'
import WidgetWrapper from '../widgets/WidgetLayout'

const SearchItem = ({ entity = {} }) => {
  const {
    name,
    industry,
    description,
    skills,
    common_connection,
    views,
    image,
    company_name,
    title,
    url,
    followers,
    company_size,
    view_common_connection
  } = entity

  const userSkills = useMemo(() => {
    if (!skills) {
      return []
    }

    return Object.entries(skills).map((skill) => {
      return { value: skill[0], name: skill[1] }
    })
  }, [skills])

  return (
    <WidgetWrapper>
      <WidgetWrapper.Body>
        <Box
          display='flex'
          justifyContent='space-between'
          alignItems='flex-start'
        >
          <Box display='inline-flex' alignItems='center' gap={1}>
            <Avatar src={image} sx={{ width: 60, height: 60 }} />

            <Box display='flex' flexDirection='column'>
              <Link to={url}>
                <h2>{title || name}</h2>
              </Link>
              {company_name && <h4>{company_name}</h4>}
              {company_size && <p>Empresa {company_size}</p>}
              {industry && <p>{industry}</p>}
            </Box>
          </Box>

          <Box display='inline-flex' alignItems='center' gap={1}>
            {!company_name && view_common_connection && (
              <span>
                <Share />
                {common_connection} comunes
              </span>
            )}

            {followers ? (
              <span>
                <Group />
                {followers}
              </span>
            ) : null}

            {views ? (
              <span>
                <Visibility />
                {views}
              </span>
            ) : null}
          </Box>
        </Box>

        <Typography>{parse(description)}</Typography>

        <TagsList tags={userSkills} />
      </WidgetWrapper.Body>
    </WidgetWrapper>
  )
}

export default SearchItem