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

import { CarouselHeroItem } from "../";

const basicExample = (
  <CarouselHeroItem image="https://placehold.co/720x560?text=Basic">
    <h2>Basic Slide Title</h2>
    <p>Basic slide content</p>
  </CarouselHeroItem>
);

const exampleWithButton = (
  <CarouselHeroItem image="https://placehold.co/720x560?text=Button">
    <h2>Slide with Button</h2>
    <p>This slide has interactive content.</p>
    <button type="button">Click me</button>
  </CarouselHeroItem>
);

const exampleWithComplexContent = (
  <CarouselHeroItem image="https://placehold.co/720x560?text=Complex">
    <h2>Complex Content Slide</h2>
    <p>This slide contains various content types:</p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
    <div>
      <button type="button">Primary Action</button>
      <button type="button">Secondary Action</button>
    </div>
  </CarouselHeroItem>
);

const exampleWithLongContent = (
  <CarouselHeroItem image="https://placehold.co/720x560?text=Long+Title">
    <h2>
      This is a Very Long Title That Should Still Be Accessible and Properly
      Rendered
    </h2>
    <p>Content for slide with long title.</p>
  </CarouselHeroItem>
);

const exampleWithSpecialCharacters = (
  <CarouselHeroItem image="https://placehold.co/720x560?text=Special+Chars">
    <h2>Špeciálny Titul s Diakritikou & Symbolmi €</h2>
    <p>Obsah so špeciálnymi znakmi: áéíóúôäňľščťžý.</p>
    <p>Mathematical symbols: ∑ ∞ ± × ÷</p>
  </CarouselHeroItem>
);

const exampleWithCustomClassName = (
  <CarouselHeroItem
    className="custom-slide-class"
    image="https://placehold.co/720x560?text=Custom"
  >
    <h2>Custom Styled Slide</h2>
    <p>This slide has custom styling.</p>
  </CarouselHeroItem>
);

describe("CarouselHeroItem conformance", () => {
  it("is valid html", () => {
    const { container } = render(basicExample);
    expect(container).toHTMLValidate();
  });

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

describe("CarouselHeroItem with button conformance", () => {
  it("is valid html", () => {
    const { container } = render(exampleWithButton);
    expect(container).toHTMLValidate();
  });

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

describe("CarouselHeroItem with complex content conformance", () => {
  it("is valid html", () => {
    const { container } = render(exampleWithComplexContent);
    expect(container).toHTMLValidate();
  });

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

describe("CarouselHeroItem with long content conformance", () => {
  it("is valid html", () => {
    const { container } = render(exampleWithLongContent);
    expect(container).toHTMLValidate();
  });

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

describe("CarouselHeroItem with special characters conformance", () => {
  it("is valid html", () => {
    const { container } = render(exampleWithSpecialCharacters);
    expect(container).toHTMLValidate();
  });

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

describe("CarouselHeroItem with custom class conformance", () => {
  it("is valid html", () => {
    const { container } = render(exampleWithCustomClassName);
    expect(container).toHTMLValidate();
  });

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