import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { SelectionRailCard } from "../SelectionRailCard";

describe("SelectionRailCard", () => {
	it("renders the title, body, and footer and honors minHeight", () => {
		render(
			<SelectionRailCard
				title="Saved tasks"
				description="Pick one"
				minHeight={200}
				footer={<button type="button">New task</button>}
			>
				<div>Task A</div>
			</SelectionRailCard>,
		);
		expect(screen.getByText("Saved tasks")).toBeInTheDocument();
		expect(screen.getByText("Task A")).toBeInTheDocument();
		expect(
			screen.getByRole("button", { name: "New task" }),
		).toBeInTheDocument();
		// minHeight is applied to the Card via inline style.
		const card = screen
			.getByText("Saved tasks")
			.closest("[data-slot='card']") as HTMLElement | null;
		expect(card?.style.minHeight).toBe("200px");
	});

	it("renders without a footer", () => {
		render(<SelectionRailCard title="No footer">body</SelectionRailCard>);
		expect(screen.getByText("No footer")).toBeInTheDocument();
	});
});