import React from "react";
import { render } from "@testing-library/react";

import CvTemplateThumbnail from "./components/CvTemplateThumbnail";
import { CvTheme } from "./cvBuilder";

const theme = (id: string, layout: CvTheme["layout"], swatches: string[]): CvTheme => ({
  id,
  name: id,
  category: "Test",
  description: "",
  layout,
  accent: swatches[0],
  photoShape: "none",
  supportsIcons: false,
  atsFriendly: true,
  requiresPro: false,
  available: true,
  swatches,
});

test("template thumbnails stay distinct and never replace themselves with sandboxed frames", () => {
  const minimal = render(<CvTemplateThumbnail theme={theme("minimal", "single", ["#111827", "#ffffff", "#ffffff"])} />);
  const minimalMarkup = minimal.container.innerHTML;
  minimal.unmount();

  const nordic = render(<CvTemplateThumbnail theme={theme("nordic", "sidebar-right", ["#3b6ea5", "#eef3f8", "#ffffff"])} />);

  expect(nordic.container.querySelector("iframe")).toBeNull();
  expect(nordic.container.innerHTML).not.toBe(minimalMarkup);
});