import "@testing-library/jest-dom";

import React from "react";
import { Cards } from "./index";

import { render, screen } from "@testing-library/react";

jest.mock("@shared/components/text", () => ({
  Text: ({ children, ...props }: any) => <span {...props}>{children}</span>,
}));

describe("Cards", () => {
  it("renders the Cards component", () => {
    render(<Cards fields={{}} />);
    expect(screen.getByText("Cards")).toBeInTheDocument();
  });

  it("renders a div wrapper", () => {
    const { container } = render(<Cards fields={{}} />);
    expect(container.querySelector("div")).toBeInTheDocument();
  });

  it("renders with empty fields object", () => {
    const { container } = render(<Cards fields={{}} />);
    expect(container.firstChild).toBeTruthy();
  });

  it("renders Text component with Cards text", () => {
    render(<Cards fields={{}} />);
    const text = screen.getByText("Cards");
    expect(text).toBeInTheDocument();
    expect(text.tagName).toBe("SPAN");
  });

  it("exports default Cards component", async () => {
    const mod = await import("./index");
    expect(mod.default).toBeDefined();
  });
});