components/ResumePreview.tsx

/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
*/
import React from 'react';
import type { ResumeDocument, ResumeSectionType, ActiveEditor } from '../lib/types';
import EditableSection from './EditableSection';

interface ResumePreviewProps {
  document: ResumeDocument;
  onContentChange: (sectionId: ResumeSectionType, newContent: string) => void;
  activeSectionId: ResumeSectionType | undefined;
  onSectionFocus: (editorState: ActiveEditor | null) => void;
}

const ORDERED_SECTION_KEYS: ResumeSectionType[] = ["Professional Summary", "Skills Section", "Experience", "Education"];

export default function ResumePreview({ 
  document, 
  onContentChange, 
  activeSectionId,
  onSectionFocus 
}: ResumePreviewProps) {

  const handleFocus = (sectionId: ResumeSectionType, content: string) => {
    onSectionFocus({ sectionId, content });
  };

  const handleBlur = () => {
    onSectionFocus(null);
  };

  // Create a map for quick lookup
  const docMap = new Map(document.map(section => [section.id, section]));

  return (
    <div className="resume-preview-paper" aria-label="Live Resume Preview" tabIndex={-1}>
      {ORDERED_SECTION_KEYS.map((key) => {
        const section = docMap.get(key);
        if (section) {
          return (
            <EditableSection
              key={section.id}
              section={section}
              onContentChange={onContentChange}
              isActive={activeSectionId === section.id}
              onFocus={handleFocus}
              onBlur={handleBlur}
            />
          );
        }
        return null; // Don't render a section if it's not in the document
      })}
    </div>
  );
}