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

describe("CTABand", () => {
  it("renders title and description", () => {
    render(
      <CTABand
        title="Ready?"
        description="Let's go."
        href="/contact"
        buttonLabel="Contact"
      />,
    );
    expect(screen.getByRole("heading", { name: "Ready?" })).toBeInTheDocument();
    expect(screen.getByText("Let's go.")).toBeInTheDocument();
  });

  it("renders a link with the correct href and label", () => {
    render(
      <CTABand
        title="Go"
        description="Now"
        href="/offerings"
        buttonLabel="Explore"
      />,
    );
    const link = screen.getByRole("link", { name: "Explore" });
    expect(link).toHaveAttribute("href", "/offerings");
  });

  it("applies variant classes", () => {
    const { container } = render(
      <CTABand title="Accent" description="Test" href="/x" variant="accent" />,
    );
    // The section should contain the accent background class
    const section = container.querySelector("section");
    expect(section?.className).toContain("bg-[var(--color-accent)]");
  });
});
