import type { ResumeModel } from "@/types/resume";
import {
  About,
  Awards,
  Certificates,
  Education,
  Experience,
  Languages,
  Projects,
  References,
  Skills,
  SocialLinks,
} from "../sections/ResumeSections";

export function ModernPortrait({
  resume,
  page,
}: {
  resume: ResumeModel;
  page: number;
}) {
  return (
    <div data-resume-document className="resume-document">
      <article
        data-resume-paper
        className={`resume-paper resume-page portrait-page bg-white font-sans text-black ${page === 1 ? "block" : "hidden"}`}
      >
        <div className="grid grid-cols-[2.1fr_0.9fr] gap-3 text-[0.55rem]">
          <main className="space-y-3">
            <About summary={resume.summary} />
            <Experience items={resume.experiences} />
          </main>
          <aside className="space-y-3 border-l border-black pl-2">
            <Projects items={resume.projects} />
            <Skills skills={resume.skills} expertises={resume.expertises} />
            <SocialLinks links={resume.socialLinks} />
          </aside>
        </div>
      </article>
      <article
        data-resume-paper
        className={`resume-paper resume-page portrait-page bg-white font-sans text-black ${page === 2 ? "block" : "hidden"}`}
      >
        <div className="grid grid-cols-[2.1fr_0.9fr] gap-3">
          <main className="space-y-4">
            <Education items={resume.education} />
            <Awards items={resume.awards} />
            <Certificates items={resume.certificates} />
            {resume.declaration && (
              <section>
                <h2 className="mb-2 border-b border-black pb-1 text-[0.65rem] font-bold tracking-[0.16em] uppercase">
                  Declaration
                </h2>
                <p className="text-[0.62rem] leading-relaxed">
                  {resume.declaration}
                </p>
              </section>
            )}
          </main>
          <aside className="space-y-4 border-l border-black pl-2">
            <Languages items={resume.languages} />
            <References items={resume.references} />
          </aside>
        </div>
      </article>
    </div>
  );
}