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

import {
  Breadcrumb,
  BreadcrumbCurrent,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator
} from "./breadcrumb";

describe("Breadcrumb", () => {
  it("renders semantic navigation, list, items, and current page state", () => {
    render(
      <Breadcrumb aria-label="Release path">
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="/releases">Releases</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbCurrent>Q2 Launch</BreadcrumbCurrent>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    );

    expect(screen.getByRole("navigation", { name: "Release path" })).toHaveAttribute(
      "data-slot",
      "root"
    );
    expect(screen.getByRole("list")).toHaveAttribute("data-slot", "list");
    expect(screen.getByRole("link", { name: "Releases" })).toHaveAttribute("data-slot", "link");
    expect(screen.getByText("Q2 Launch")).toHaveAttribute("aria-current", "page");
    expect(screen.getByText("Q2 Launch")).toHaveAttribute("data-current", "");
  });

  it("supports custom separators", () => {
    render(
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="/runs">Runs</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator>/</BreadcrumbSeparator>
          <BreadcrumbItem>
            <BreadcrumbCurrent>run-42</BreadcrumbCurrent>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    );

    expect(screen.getByText("/")).toHaveAttribute("data-slot", "separator");
    expect(screen.getByText("/")).toHaveAttribute("aria-hidden", "true");
  });

  it("supports asChild composition for custom links", () => {
    render(
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink asChild>
              <button type="button">Open run</button>
            </BreadcrumbLink>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    );

    const button = screen.getByRole("button", { name: "Open run" });
    expect(button).toHaveAttribute("data-slot", "link");
  });
});