"use client";

import { useMemo } from "react";
import { markdownToHtml } from "@/lib/markdown";
import type { CVCareerData } from "@/lib/types/cv";
import { CvHeader } from "@/components/cv/CvHeader";
import { CvLeftColumn } from "@/components/cv/CvLeftColumn";
import { CvRightColumn } from "@/components/cv/CvRightColumn";
import type { CvExperienceRendered } from "@/components/cv/CvExperiencePreview";

export function CvPreview({ data }: { data: CVCareerData }) {
  const accrocheHtml = useMemo(() => markdownToHtml(data.accroche), [data.accroche]);
  const etatCivilHtml = useMemo(() => markdownToHtml(data.etatCivil), [data.etatCivil]);
  const formationsHtml = useMemo(() => markdownToHtml(data.formations), [data.formations]);
  const competencesHtml = useMemo(
    () => markdownToHtml(data.competences),
    [data.competences],
  );
  const softSkillsHtml = useMemo(() => markdownToHtml(data.softSkills), [data.softSkills]);
  const centresInteretHtml = useMemo(
    () => markdownToHtml(data.centresInteret),
    [data.centresInteret],
  );
  const experiences = useMemo<CvExperienceRendered[]>(
    () =>
      data.experiences.map((experience) => ({
        experience,
        html: markdownToHtml(experience.contenu),
      })),
    [data.experiences],
  );

  return (
    <div className="flex justify-center overflow-x-auto p-6 print:block print:p-0 print:overflow-visible">
      <div className="cv-sheet">
        <CvHeader html={accrocheHtml} />
        <div className="cv-sheet-body">
          <CvLeftColumn
            etatCivilHtml={etatCivilHtml}
            formationsHtml={formationsHtml}
            competencesHtml={competencesHtml}
            softSkillsHtml={softSkillsHtml}
            centresInteretHtml={centresInteretHtml}
          />
          <CvRightColumn experiences={experiences} />
        </div>
      </div>
    </div>
  );
}