import { describe, it, expect, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { TabbedCard } from "../TabbedCard";
import { TabsTrigger } from "@/components/ui/tabs";

describe("TabbedCard", () => {
	it("renders the provided tab triggers and reports selection changes", async () => {
		const onChange = vi.fn();
		render(
			<TabbedCard
				value="jellyfin"
				onChange={onChange}
				tabs={[
					<TabsTrigger key="jellyfin" value="jellyfin">
						Jellyfin
					</TabsTrigger>,
					<TabsTrigger key="nextcloud" value="nextcloud">
						Nextcloud
					</TabsTrigger>,
				]}
			>
				<p>Body</p>
			</TabbedCard>,
		);
		expect(screen.getByText("Jellyfin")).toBeInTheDocument();
		expect(screen.getByText("Body")).toBeInTheDocument();

		await userEvent.click(screen.getByText("Nextcloud"));
		expect(onChange).toHaveBeenCalledWith("nextcloud");
	});
});