'use client';

import React from 'react';
import { EmailContent } from '@/types/email';

interface EmailContentDisplayProps {
  content: EmailContent | null | undefined;
  className?: string;
  showQuotedText?: boolean;
  type?: 'html' | 'text' | 'auto';
  debug?: boolean;
}

/**
 * Unified component for displaying email content in a consistent way
 * This handles both HTML and plain text content with proper styling
 */
const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
  content,
  className = '',
  showQuotedText = true,
  type = 'auto',
  debug = false
}) => {
  if (!content) {
    return <div className={className}>No content available</div>;
  }
  
  let htmlContent = '';
  
  // Simple content rendering
  if (content.isHtml && content.html) {
    // Use HTML content
    htmlContent = content.html;
  } else if (content.text) {
    // Format text content with line breaks
    htmlContent = content.text
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/\n/g, '<br>');
  } else {
    // No content available
    htmlContent = 'No content available';
  }
  
  return (
    <div className={`email-content-display ${className}`}>
      <div 
        className="email-content-inner"
        dangerouslySetInnerHTML={{ __html: htmlContent }} 
      />
      
      {/* Debug output if enabled */}
      {debug && (
        <div className="mt-4 p-2 text-xs bg-gray-100 border rounded">
          <p><strong>Content Type:</strong> {content.isHtml ? 'HTML' : 'Text'}</p>
          <p><strong>Direction:</strong> {content.direction}</p>
          <p><strong>HTML Length:</strong> {content.html?.length || 0}</p>
          <p><strong>Text Length:</strong> {content.text?.length || 0}</p>
        </div>
      )}
      
      <style jsx>{`
        .email-content-display {
          width: 100%;
        }
        
        .email-content-inner img {
          max-width: 100%;
          height: auto;
        }
      `}</style>
    </div>
  );
};

export default EmailContentDisplay;