Proyectos de Subversion LeadersLinked - SPA

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

import { parse } from '@utils';

import Widget from '@components/UI/Widget';
import TagsList from '@components/UI/TagsList';

export default function SearchItem({
  item: {
    name,
    industry,
    description,
    skills,
    common_connection,
    views,
    image,
    company_name,
    title,
    url,
    followers,
    company_size,
    view_common_connection
  }
}) {
  const navigate = useNavigate();
  const userSkills = useMemo(() => {
    if (!skills) {
      return [];
    }

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

  return (
    <Widget>
      <Widget.Header
        avatar={image}
        title={title || name}
        onClick={() => navigate(url)}
        renderAction={() => {
          return (
            <Box display='inline-flex' alignItems='center' gap={1}>
              {!company_name && view_common_connection && (
                <Typography variant='overline'>
                  <Share />
                  {common_connection} comunes
                </Typography>
              )}

              {followers ? (
                <Typography variant='overline'>
                  <Group />
                  {followers}
                </Typography>
              ) : null}

              {views ? (
                <Typography variant='overline'>
                  <Visibility />
                  {views}
                </Typography>
              ) : null}
            </Box>
          );
        }}
      />

      <Widget.Body>
        {company_name && <Typography variant='h4'>{company_name}</Typography>}
        {company_size && <Typography>Empresa {company_size}</Typography>}
        {industry && <Typography>{industry}</Typography>}
        <Typography>{parse(description)}</Typography>
        {userSkills.length > 0 && <TagsList tags={userSkills} />}
      </Widget.Body>
    </Widget>
  );
}