import { describe, expect, it } from "vitest";
import { getAllBlogPosts } from "../../lib/content";
import {
  extractSectionBannerFill,
  resolveBlogPageBackgroundColor,
} from "../../lib/blogSectionBackground";

describe("extractSectionBannerFill", () => {
  it("reads the first 1920×672 rect fill and ignores a later clip-path rect", () => {
    const svg = `<svg>
<rect width="1920" height="672" fill="#ECC98E"/>
<defs>
<clipPath id="clip">
<rect width="1920" height="672" fill="white"/>
</clipPath>
</defs>
</svg>`;

    expect(extractSectionBannerFill(svg)).toBe("#ECC98E");
  });

  it("returns null when there is no section rect", () => {
    expect(extractSectionBannerFill("<svg></svg>")).toBeNull();
  });
});

describe("resolveBlogPageBackgroundColor", () => {
  it("uses the section SVG fill when the banner file exists", () => {
    expect(
      resolveBlogPageBackgroundColor({
        slug: "making-decisions-without-hierarchy",
        frontmatterColor: "#F3F3F1",
      }),
    ).toBe("#ECC98E");
  });

  it("falls back to frontmatter when there is no section SVG", () => {
    expect(
      resolveBlogPageBackgroundColor({
        slug: "not-a-real-article",
        frontmatterColor: "#F4F3F1",
      }),
    ).toBe("#F4F3F1");
  });
});

describe("parsed blog posts", () => {
  it("uses each article’s section banner fill as the page background", () => {
    const posts = getAllBlogPosts();
    expect(posts.length).toBeGreaterThan(0);

    for (const post of posts) {
      const fromBanner = resolveBlogPageBackgroundColor({
        slug: post.slug,
        bannerFileName: post.frontmatter.banner?.horizontal,
        frontmatterColor: "#000000",
      });
      if (fromBanner === "#000000") {
        continue;
      }
      expect(post.frontmatter.background?.color).toBe(fromBanner);
    }
  });
});