import { describe, it, expect } from "vitest";
import { render } from "@testing-library/react";
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
import type { Block } from "@/features/editor/state/editorStore";

// 프리뷰 렌더러가 상위 컨테이너(프리뷰 캔버스)의 배경색을 덮어쓰지 않도록 하는 TDD
// - 루트 컨테이너는 레이아웃/텍스트 색상만 담당하고, 고정 배경색(bg-slate-950)은 사용하지 않아야 한다.

describe("PublicPageRenderer - 배경색 위임", () => {
  it("루트 컨테이너는 bg-slate-950 같은 고정 배경 클래스 없이 렌더링되어야 한다", () => {
    const blocks: Block[] = [];

    const { container } = render(<PublicPageRenderer blocks={blocks} />);

    const root = container.firstElementChild as HTMLElement | null;
    expect(root).not.toBeNull();

    const className = root!.getAttribute("class") ?? "";

    expect(className).not.toContain("bg-slate-950");
    expect(className).not.toContain("text-slate-50");
  });

  it("루트 텍스트/버튼 블록 영역은 고정 bg-slate-950 배경 대신 캔버스 배경을 그대로 보여야 한다", () => {
    const blocks: Block[] = [
      {
        id: "text_root",
        type: "text",
        props: {
          text: "텍스트",
          align: "left",
          size: "base",
        },
      } as any,
      {
        id: "button_root",
        type: "button",
        props: {
          label: "버튼",
          href: "#",
          align: "left",
        },
      } as any,
    ];

    const { container } = render(<PublicPageRenderer blocks={blocks} />);

    // 섹션 블록이 하나도 없으므로, 첫 번째 <section> 은 루트 텍스트/버튼 블록을 감싸는 래퍼다.
    const firstSection = container.querySelector("section");
    expect(firstSection).not.toBeNull();

    const className = firstSection!.getAttribute("class") ?? "";

    expect(className).not.toContain("bg-slate-950");
  });
});