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

const mockVertical: Vertical = {
  slug: "honey-bees",
  title: "Honey Bees",
  summary: "Fresh local honey",
  image: "/images/honey-bees.jpg",
  description: "Details here.",
  pillars: ["body"],
  status: "active",
};

describe("VerticalCard", () => {
  it("renders title and summary in grid variant (default)", () => {
    render(<VerticalCard vertical={mockVertical} />);
    expect(screen.getByText("Honey Bees")).toBeInTheDocument();
    expect(screen.getByText("Fresh local honey")).toBeInTheDocument();
  });

  it("renders status badge text", () => {
    render(<VerticalCard vertical={mockVertical} />);
    // status is rendered as "active" -> "active"
    expect(screen.getByText("active")).toBeInTheDocument();
  });

  it("links to the correct offering page", () => {
    render(<VerticalCard vertical={mockVertical} />);
    const link = screen.getByRole("link");
    expect(link).toHaveAttribute("href", "/offerings/honey-bees");
  });

  it("renders feature variant without crashing", () => {
    render(<VerticalCard vertical={mockVertical} variant="feature" />);
    expect(screen.getByText("Honey Bees")).toBeInTheDocument();
  });
});