Proyectos de Subversion LeadersLinked - SPA

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

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>
  )
}