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

import { Pill } from "../";

const example = (
  <>
    <h1>
      This many: <Pill>1</Pill>
    </h1>
    <h2>
      I have more: <Pill>2</Pill>
    </h2>
    <p>
      <Pill className="large">3</Pill>
    </p>
    <p>
      Max 3 digits please. <Pill>123</Pill>
    </p>
    <p>
      <Pill color="transparent">T</Pill>
      <Pill color="surface-secondary">S</Pill>
      <Pill color="surface-tertiary">T</Pill>
      <Pill color="surface-subtle">Su</Pill>
      <Pill color="surface-moderate">M</Pill>
      <Pill color="surface-contrast">C</Pill>
      <Pill color="surface-accent">A</Pill>
    </p>
    <p>
      <Pill size="small">S</Pill>
      <Pill size="medium">M</Pill>
      <Pill size="large">L</Pill>
      <Pill size="xlarge">XL</Pill>
      <Pill size="xxlarge">XXL</Pill>
    </p>
  </>
);

it("is valid html", () => {
  const { container } = render(example);
  expect(container).toHTMLValidate();
});

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