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

import { RecommendationRail, type RecommendationRailItem } from "../recommendation-rail";

const items: RecommendationRailItem[] = [
  {
    id: "item-2",
    title: "Linen Jacket",
    brand: "Everlane",
    price: 6400,
    original_retail: null,
    condition: "EUC",
    thumbnail_url: null,
    store: { id: "store-2", name: "Thread House" },
  },
];

describe("RecommendationRail", () => {
  it("renders titled item rails with an optional view-all link", () => {
    render(
      <RecommendationRail
        title="Similar items"
        items={items}
        viewAllHref="/items?category_slug=tops"
        viewAllLabel="View similar"
      />,
    );

    expect(screen.getByRole("region", { name: "Similar items" })).toBeInTheDocument();
    expect(screen.getByRole("heading", { name: "Similar items" })).toBeInTheDocument();
    expect(screen.getByRole("link", { name: "View similar" })).toHaveAttribute(
      "href",
      "/items?category_slug=tops",
    );
    expect(screen.getByText("Linen Jacket")).toBeInTheDocument();
  });

  it("collapses when not loading and there are no items", () => {
    const { container } = render(<RecommendationRail title="Similar items" items={[]} />);

    expect(container).toBeEmptyDOMElement();
  });

  it("keeps the rail visible while loading", () => {
    render(<RecommendationRail title="Similar items" items={[]} isLoading />);

    expect(screen.getByRole("region", { name: "Similar items" })).toBeInTheDocument();
    expect(screen.getByRole("heading", { name: "Similar items" })).toBeInTheDocument();
  });
});