Proyectos de Subversion LeadersLinked - SPA

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

import TagsList from '../UI/TagsList'
import StyledContainer from '../widgets/WidgetLayout'
import Paraphrase from '../UI/Paraphrase'

const SearchItem = ({
  name,
  industry,
  description,
  skills,
  common_connection,
  views,
  image,
  company_name,
  title,
  url,
  followers,
  company_size,
  view_common_connection
}) => {
  const userSkills = useMemo(
    () =>
      Object.entries(skills).map((skill) => {
        return { value: skill[0], name: skill[1] }
      }),
    [skills]
  )

  return (
    <StyledContainer>
      <StyledContainer.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>

        <Paraphrase>{description || ''}</Paraphrase>

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

export default SearchItem