Proyectos de Subversion LeadersLinked - SPA

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

import { Menu } from '@shared/components';
import colors from '@styles/config/colors';

export const MessageItem = ({ message, onReport }) => {
  const renderMessageContent = () => {
    switch (message.type) {
      case 'text':
        return (
          <Typography
            sx={{
              wordBreak: 'break-word',
              color:
                message.side === 'right' ? colors.button.text.primary : colors.button.text.secondary
            }}
          >
            {message.message}
          </Typography>
        );
      case 'image':
        return (
          <Box sx={{ maxWidth: '250px', maxHeight: '250px' }}>
            <img
              src={message.filename}
              alt='Mensaje de imagen'
              style={{
                width: '100%',
                height: 'auto',
                borderRadius: '8px',
                objectFit: 'cover'
              }}
            />
          </Box>
        );
      case 'document':
        return (
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
            <img
              src='/images/extension/pdf.png'
              alt='Documento'
              style={{ width: '24px', height: '24px' }}
            />
            <Typography variant='body2' component='a' href={message.filename} download>
              Descargar documento
            </Typography>
          </Box>
        );
      default:
        return (
          <Typography variant='body2' sx={{ wordBreak: 'break-word' }}>
            {message.message || 'Contenido no disponible'}
          </Typography>
        );
    }
  };

  return (
    <Box
      sx={{
        display: 'flex',
        justifyContent: message.side === 'right' ? 'flex-end' : 'flex-start',
        mb: 1,
        px: 1
      }}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          maxWidth: '70%',
          position: 'relative'
        }}
      >
        <Typography variant='caption' sx={{ mb: 0.5 }}>
          {message.sender_name}
        </Typography>

        <Box
          sx={{
            backgroundColor:
              message.side === 'right'
                ? colors.button.background.primary
                : colors.button.background.secondary,
            borderRadius: message.side === 'right' ? '12px 12px 4px 12px' : '12px 12px 12px 4px',
            padding: 0.625,
            position: 'relative',
            '&:hover .message-actions': {
              opacity: 1
            }
          }}
        >
          {renderMessageContent()}

          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, marginTop: 0.5 }}>
            <Typography variant='caption'>{message.date}</Typography>

            {message.abuse_report_url && (
              <Menu className='message-actions' style={{ opacity: 0 }}>
                <Menu.Item onClick={() => onReport(message.abuse_report_url)}>
                  <Report sx={{ mr: 1 }} />
                  Reportar mensaje
                </Menu.Item>
              </Menu>
            )}
          </Box>
        </Box>
      </Box>
    </Box>
  );
};