import { render } from "@testing-library/react";
import { axe } from "vitest-axe";
import { Tag, TagButton } from "..";
import { colors } from "../Tag";

const sizes = ["small", "large"];

const example = (
  <>
    {colors.map((color) => (
      <Tag key={color} color={color}>
        {color}
      </Tag>
    ))}

    {sizes.map((size) => (
      <Tag key={size} size={size}>
        {size} size
      </Tag>
    ))}

    <Tag actionButton={<TagButton iconName="close" ariaLabel="Close" />}>
      With action button
    </Tag>

    <Tag
      size="large"
      actionButton={<TagButton iconName="close" ariaLabel="Close" />}
    >
      Large with action button
    </Tag>

    <Tag onClick={() => {}}>Clickable tag</Tag>

    <Tag onClick={() => {}} isDisabled>
      Disabled clickable tag
    </Tag>

    <Tag href="/test">Link tag</Tag>

    <Tag href="https://example.com" target="_blank" rel="noopener">
      External link tag
    </Tag>

    <Tag href="/test" isDisabled>
      Disabled link tag
    </Tag>
  </>
);

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

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