← back to Norma

components/email-analyzer/ProsConsPanel.tsx

225 lines

'use client';

import {
  Loader2,
  ThumbsUp,
  ThumbsDown,
  Sparkles,
} from 'lucide-react';

/* ─── Types ──────────────────────────────────────────────────────────────── */

export interface ProsConsData {
  pros: string[];
  cons: string[];
  suggestions: string[];
}

interface ProsConsPanelProps {
  data: ProsConsData | null;
  loading: boolean;
  /** Label for the "pros" column header (e.g. "Pros" or "v3 does better") */
  prosLabel?: string;
  /** Label for the "cons" column header (e.g. "Cons" or "v2 did better") */
  consLabel?: string;
  /** When true, renders in a compact layout without the outer card wrapper */
  compact?: boolean;
}

/* ─── Component ──────────────────────────────────────────────────────────── */

export default function ProsConsPanel({
  data,
  loading,
  prosLabel = 'Pros',
  consLabel = 'Cons',
  compact = false,
}: ProsConsPanelProps) {
  if (loading && !data) {
    return (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          justifyContent: 'center',
          padding: compact ? 8 : 16,
        }}
      >
        <Loader2 size={14} className="spinner" />
        <span style={{ fontSize: 13, color: 'var(--color-text-muted)' }}>
          Analyzing differences...
        </span>
      </div>
    );
  }

  if (!data) {
    if (compact) {
      return (
        <div
          style={{
            fontSize: 12,
            color: 'var(--color-text-muted)',
            textAlign: 'center',
            padding: 4,
          }}
        >
          Analysis unavailable
        </div>
      );
    }
    return null;
  }

  return (
    <>
      <div style={{ display: 'flex', gap: 0 }}>
        {/* Pros column */}
        <div
          style={{
            flex: 1,
            padding: compact ? '0 16px 0 0' : '12px 16px',
            borderRight: '1px solid var(--color-border)',
          }}
        >
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 6,
              marginBottom: 8,
            }}
          >
            <ThumbsUp size={13} style={{ color: 'var(--color-success)' }} />
            <span
              style={{
                fontSize: 12,
                fontWeight: 700,
                color: 'var(--color-success)',
                textTransform: 'uppercase',
                letterSpacing: '0.05em',
              }}
            >
              {prosLabel}
            </span>
          </div>
          <ul style={{ margin: 0, paddingLeft: 16, listStyleType: 'disc' }}>
            {data.pros.map((item, i) => (
              <li
                key={i}
                style={{
                  fontSize: 12,
                  color: 'var(--color-text-secondary)',
                  lineHeight: 1.5,
                  marginBottom: 4,
                }}
              >
                {item}
              </li>
            ))}
          </ul>
        </div>

        {/* Cons column */}
        <div
          style={{
            flex: 1,
            padding: compact ? '0 0 0 16px' : '12px 16px',
          }}
        >
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 6,
              marginBottom: 8,
            }}
          >
            <ThumbsDown
              size={13}
              style={{
                color: 'var(--color-warning-text, var(--color-secondary))',
              }}
            />
            <span
              style={{
                fontSize: 12,
                fontWeight: 700,
                color: 'var(--color-warning-text, var(--color-secondary))',
                textTransform: 'uppercase',
                letterSpacing: '0.05em',
              }}
            >
              {consLabel}
            </span>
          </div>
          <ul style={{ margin: 0, paddingLeft: 16, listStyleType: 'disc' }}>
            {data.cons.map((item, i) => (
              <li
                key={i}
                style={{
                  fontSize: 12,
                  color: 'var(--color-text-secondary)',
                  lineHeight: 1.5,
                  marginBottom: 4,
                }}
              >
                {item}
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Suggestions row */}
      {data.suggestions.length > 0 && (
        <div
          style={{
            marginTop: compact ? 12 : 0,
            padding: compact ? '12px 0 0' : '10px 16px',
            borderTop: '1px solid var(--color-border)',
          }}
        >
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 6,
              marginBottom: compact ? 8 : 6,
            }}
          >
            <Sparkles size={13} style={{ color: 'var(--color-lane-b)' }} />
            <span
              style={{
                fontSize: 12,
                fontWeight: 700,
                color: 'var(--color-lane-b)',
                textTransform: 'uppercase',
                letterSpacing: '0.05em',
              }}
            >
              Suggestions to improve
            </span>
          </div>
          <ul style={{ margin: 0, paddingLeft: 16, listStyleType: 'disc' }}>
            {data.suggestions.map((item, i) => (
              <li
                key={i}
                style={{
                  fontSize: 12,
                  color: 'var(--color-text-secondary)',
                  lineHeight: 1.5,
                  marginBottom: 4,
                }}
              >
                {item}
              </li>
            ))}
          </ul>
        </div>
      )}
    </>
  );
}