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

vi.mock("@/components/AuthGuard", () => ({
  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
}));
vi.mock("@/components/auth/AuthBranding", () => ({
  default: () => <aside data-testid="branding">الهوية</aside>,
}));

import AuthLayout from "@/components/auth/AuthLayout";

describe("AuthLayout", () => {
  it("marks the login tab active", () => {
    render(<AuthLayout activeTab="login"><p>نموذج الدخول</p></AuthLayout>);
    expect(screen.getByRole("link", { name: "تسجيل الدخول" })).toHaveClass("bg-[#FCD704]");
    expect(screen.getByRole("link", { name: "إنشاء حساب" })).not.toHaveClass("bg-[#FCD704]");
    expect(screen.getByText("نموذج الدخول")).toBeInTheDocument();
  });

  it("marks the register tab active", () => {
    render(<AuthLayout activeTab="register"><p>نموذج التسجيل</p></AuthLayout>);
    expect(screen.getByRole("link", { name: "إنشاء حساب" })).toHaveClass("bg-[#FCD704]");
    expect(screen.getByRole("link", { name: "تسجيل الدخول" })).not.toHaveClass("bg-[#FCD704]");
  });

  it("hides tabs for the forgot-password flow", () => {
    render(<AuthLayout activeTab="forgot"><p>استعادة الحساب</p></AuthLayout>);
    expect(screen.queryByRole("link", { name: "تسجيل الدخول" })).not.toBeInTheDocument();
    expect(screen.getByText("استعادة الحساب")).toBeInTheDocument();
  });
});