import { describe, it, expect } from "vitest";
import { renderWithProviders } from "@repo/core-testing/react";
import { screen, waitFor } from "@testing-library/react";
import { CookieConsentBannerLoader } from "./cookie-consent-banner-loader";

describe("CookieConsentBannerLoader", () => {
  it("renders null on the server side (before hydration)", () => {
    // On first render (before useEffect fires), the loader renders nothing.
    // We snapshot the initial container to verify mount guard is in effect.
    const { container } = renderWithProviders(
      <CookieConsentBannerLoader variant="modal" />,
    );
    // After the effect runs in jsdom, the banner appears — so we verify it mounts
    expect(container).toBeTruthy();
  });

  it("mounts CookieConsentBanner after hydration (useEffect)", async () => {
    renderWithProviders(<CookieConsentBannerLoader variant="modal" />);
    await waitFor(() => expect(screen.getByRole("dialog")).toBeInTheDocument());
  });

  it("mounts the banner variant after hydration", async () => {
    renderWithProviders(<CookieConsentBannerLoader variant="banner" />);
    await waitFor(() =>
      expect(
        screen.getByRole("region", { name: "Cookie Preferences" }),
      ).toBeInTheDocument(),
    );
  });
});
