import { render } from "@testing-library/react";
import { axe } from "vitest-axe";

import { AnchorNavigation } from "../";

const basicItems = [
  { label: "Key Features", href: "#features", isActive: true },
  { label: "Pricing", href: "#pricing" },
  { label: "Getting Started", href: "#getting-started" },
  { label: "Contact", href: "#contact" },
];

const example = (
  <div id="root">
    {/* Basic usage */}
    <AnchorNavigation items={basicItems} aria-label="Basic navigation" />

    {/* With additional content */}
    <AnchorNavigation
      items={basicItems}
      aria-label="Dark navigation with content"
    >
      <div className="bold">
        <div className="align-sm-right">2 €</div>
        <div className="reset-font-weight">No commitment</div>
      </div>
      <button type="button">Get Started</button>
    </AnchorNavigation>

    {/* Multiple items */}
    <AnchorNavigation
      items={[
        { label: "Overview", href: "#overview", isActive: true },
        { label: "Features", href: "#features" },
        { label: "Documentation", href: "#docs" },
        { label: "API Reference", href: "#api" },
        { label: "Examples", href: "#examples" },
        { label: "Support", href: "#support" },
      ]}
      aria-label="Extended navigation"
    />
  </div>
);

it("is valid html", () => {
  const { container } = render(example);
  expect(container).toHTMLValidate({
    rules: {
      "no-inline-style": "off",
      "attribute-boolean-style": "off",
    },
  });
});

it("is accessible", async () => {
  const { container } = render(example);
  expect(await axe(container)).toHaveNoViolations();
});