Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { Box, IconButton, Typography } from '@mui/material';
import Edit from '@mui/icons-material/Edit';
import Delete from '@mui/icons-material/Delete';

import { parse } from '@utils';
import { getMonthName } from '@utils/dates';

export default function ExperienceItem({
  experience = {},
  onDelete = () => {},
  onEdit = () => {},
  edit = false
}) {
  const {
    title,
    description,
    company,
    size,
    industry,
    formatted_adress,
    from_month,
    from_year,
    to_month,
    to_year
  } = experience;
  const industryName = typeof industry === 'object' ? industry.name : industry;

  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'start',
        justifyContent: 'space-between',
        gap: 2,
        marginBottom: 1
      }}
    >
      <Box>
        <Typography variant='h4'>{title}</Typography>
        <Typography variant='body1' sx={{ fontSize: '14px' }}>
          {company}
        </Typography>

        <Typography
          variant='overline'
          sx={{ display: 'block' }}
        >{`${industryName} / ${size}`}</Typography>

        <Typography variant='overline' sx={{ display: 'block' }}>
          {`${getMonthName(from_month)} ${from_year}`} -{' '}
          {to_year ? `${getMonthName(to_month)} ${to_year}` : 'Actual'}
        </Typography>

        <Typography variant='overline' sx={{ display: 'block' }}>
          {formatted_adress}
        </Typography>

        {parse(description)}
      </Box>

      {edit && (
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
          <IconButton onClick={onEdit}>
            <Edit />
          </IconButton>
          <IconButton onClick={onDelete}>
            <Delete />
          </IconButton>
        </Box>
      )}
    </Box>
  );
}