Proyectos de Subversion LeadersLinked - SPA

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

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

const SearchItem = ({
  name,
  industry,
  description,
  skills,
  common_connection,
  views,
  image,
  company_name,
  title,
  url,
  followers,
  company_size,
  view_common_connection
}) => {
  return (
    <StyledContainer>
      <StyledContainer.Body>
        <Box display='flex' justifyContent='space-between'>
          <Box display='inline-flex' alignItems='center' gap={2}>
            <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={2}>
            {!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>

        {description && parse(description)}

        <TagsList tags={Object.values(skills)} />
      </StyledContainer.Body>
    </StyledContainer>
  )
}

export default SearchItem