import { render, screen } from "@testing-library/react";
import { MasterDetailLayout } from "./MasterDetailLayout";
import { describe, it, expect } from "vitest";
import React from "react";

describe("MasterDetailLayout", () => {
  it("renders children correctly", () => {
    render(
      <MasterDetailLayout>
        <MasterDetailLayout.Master>
          <div data-testid="master-content">Master</div>
        </MasterDetailLayout.Master>
        <MasterDetailLayout.Detail>
          <div data-testid="detail-content">Detail</div>
        </MasterDetailLayout.Detail>
      </MasterDetailLayout>
    );

    expect(screen.getByTestId("master-content")).toBeDefined();
    expect(screen.getByTestId("detail-content")).toBeDefined();
  });

  it("applies pending opacity to master when isPending is true", () => {
    const { container } = render(
      <MasterDetailLayout.Master isPending={true}>
        <div>Content</div>
      </MasterDetailLayout.Master>
    );

    const pendingDiv = container.querySelector(".opacity-50");
    expect(pendingDiv).not.toBeNull();
  });

  it("does not apply pending opacity to master when isPending is false", () => {
    const { container } = render(
      <MasterDetailLayout.Master isPending={false}>
        <div>Content</div>
      </MasterDetailLayout.Master>
    );

    const pendingDiv = container.querySelector(".opacity-50");
    expect(pendingDiv).toBeNull();
  });
});