import { render, screen } from "@testing-library/react";
import { DropdownDivider, DropdownItem } from "../";
import { Dropdown } from "../Dropdown";

describe("Dropdown Component Unit Tests", () => {
  it("renders with base class", () => {
    const { getByTestId } = render(
      <Dropdown
        id="dropdown-test"
        button={{ children: "toggle" }}
        data-testid="dropdown"
      />,
    );
    const dropdown = getByTestId("dropdown");
    expect(dropdown).toBeInTheDocument();
    expect(dropdown).toHaveClass("dropdown");
  });

  it("merges custom className", () => {
    const { getByTestId } = render(
      <Dropdown
        id="dropdown-test"
        button={{ children: "toggle" }}
        className="custom"
        data-testid="dropdown"
      />,
    );
    expect(getByTestId("dropdown")).toHaveClass("custom");
  });

  it("renders children", () => {
    render(
      <Dropdown id="dropdown-test" button={{ children: "toggle" }}>
        <DropdownItem>Item 1</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Item 2</DropdownItem>
      </Dropdown>,
    );
    expect(screen.getByText("Item 1")).toBeInTheDocument();
    expect(screen.getByText("Item 2")).toBeInTheDocument();
  });

  it("applies spacing class when hasSpacing is true", () => {
    const { getByTestId } = render(
      <Dropdown
        id="dropdown-test"
        button={{ children: "toggle" }}
        hasSpacing
        data-testid="dropdown"
      />,
    );
    expect(getByTestId("dropdown")).toHaveClass("dropdown-spacing");
  });

  it("forwards additional props", () => {
    const { getByTestId } = render(
      <Dropdown
        id="dropdown-test"
        button={{ children: "toggle" }}
        aria-label="dropdown"
        data-testid="dropdown"
      />,
    );
    expect(getByTestId("dropdown")).toHaveAttribute("aria-label", "dropdown");
  });

  // Add more tests for interaction, focus trap, etc. as needed
});