import { cleanup, render, screen } from "@testing-library/react";
import assert from "node:assert";
import { afterEach, describe, test } from "node:test";
import { Container } from "./index";

describe("Container", () => {

  afterEach(() => {
    cleanup();
  });

  test("renders children", () => {
    render(
      <Container>
        Test
        <span>Child 1</span>
      </Container>
    );

    assert.notStrictEqual(screen.queryByText("Test"), null);
    assert.notStrictEqual(screen.queryByText("Child 1"), null);
  });

  test("applies default class", () => {
    const { container } = render(<Container />);
    const element = container.firstChild as HTMLElement;
    assert.ok(element.classList.contains("container"));
  });

  test("passes extra attributes", () => {
    render(<Container extraAttrs={{ "data-testid": "container" }} />);
    assert.notStrictEqual(screen.queryByTestId("container"), null);
  });

  test("applies custom styles", () => {
    const customStyle = {
      backgroundColor: "red",
      padding: "20px",
      display: "flex",
    };

    const { container } = render(
      <Container style={customStyle}>Test</Container>
    );

    const div = container.firstChild as HTMLElement;
    assert.strictEqual(div.style.backgroundColor, "red");
    assert.strictEqual(div.style.padding, "20px");
    assert.strictEqual(div.style.display, "flex");
  });
});