import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vitest";

import { UserHeader } from "../user-header";

describe("profile Tailwind components", () => {
  it("renders guest, member, and VIP header states", () => {
    const guestHtml = renderToStaticMarkup(
      <UserHeader
        state="guest"
        name="User name"
        avatarUrl={null}
        onLoginClick={() => undefined}
      />,
    );
    const memberHtml = renderToStaticMarkup(
      <UserHeader state="member" name="Chase" avatarUrl={null} />,
    );
    const vipHtml = renderToStaticMarkup(
      <UserHeader state="vip" name="Chase" avatarUrl={null} />,
    );

    expect(guestHtml).toContain("flex w-full items-center");
    expect(guestHtml).toContain('aria-label="Log in"');
    expect(guestHtml).toContain("login");
    expect(memberHtml).toContain("VIP membership not activated");
    expect(vipHtml).toContain("VIP Member");
    expect(vipHtml).toContain("rounded-full");
  });

  it("renders the loading skeleton with stable utility dimensions", () => {
    const html = renderToStaticMarkup(
      <UserHeader state="member" name="Chase" avatarUrl={null} isLoading />,
    );

    expect(html).toContain('aria-hidden="true"');
    expect(html).toContain("w-[60%]");
    expect(html).toContain("w-[80%]");
    expect(html).toContain("w-[40%]");
  });
});