// @vitest-environment jsdom
import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/svelte";
import ToggleButton from "./ToggleButton.svelte";

describe("ToggleButton", () => {
  it("renders the label", () => {
    render(ToggleButton, { label: "Court 1", active: true, onclick: () => {} });
    expect(screen.getByText("Court 1")).toBeInTheDocument();
  });

  it("shows the outline/secondary styling when inactive", () => {
    render(ToggleButton, { label: "Court 1", active: false, onclick: () => {} });
    const button = screen.getByRole("button");
    expect(button).toHaveClass("outline", "secondary");
  });

  it("has no outline/secondary styling when active", () => {
    render(ToggleButton, { label: "Court 1", active: true, onclick: () => {} });
    const button = screen.getByRole("button");
    expect(button).not.toHaveClass("outline");
    expect(button).not.toHaveClass("secondary");
  });

  it("calls onclick when clicked", async () => {
    const onclick = vi.fn();
    render(ToggleButton, { label: "Court 1", active: true, onclick });
    await fireEvent.click(screen.getByRole("button"));
    expect(onclick).toHaveBeenCalledOnce();
  });
});