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

import { BodyBanner } from "../";

const example = (
  <>
    <BodyBanner size="small" buttonText="Learn More">
      <h3>Small Banner Example</h3>
      <p>This is a small banner with image and call-to-action button.</p>
    </BodyBanner>

    <BodyBanner
      size="large"
      buttonText="Get Started"
      image={
        <img
          src="https://placehold.co/640x480?text=Large+banner"
          alt="Large banner"
        />
      }
    >
      <h3>Large Banner Example</h3>
      <p>This is a large banner with two-column layout.</p>
    </BodyBanner>

    <BodyBanner
      size="small"
      color="background-accent"
      buttonText="Discover"
      image={
        <img
          src="https://placehold.co/640x480?text=Accent+banner"
          alt="Accent banner"
        />
      }
    >
      <h3>Accent Background</h3>
      <p>Brand accent background banner.</p>
    </BodyBanner>

    <BodyBanner
      size="small"
      color="surface-subtle"
      buttonText="Explore"
      image={
        <img
          src="https://placehold.co/640x480?text=Subtle+banner"
          alt="Subtle banner"
        />
      }
    >
      <h3>Subtle Surface</h3>
      <p>Gentle background color banner.</p>
    </BodyBanner>

    <BodyBanner size="small" buttonText="Learn More">
      <h3>Text-Only Banner</h3>
      <p>Banner without image focusing on text content.</p>
    </BodyBanner>

    <BodyBanner
      size="large"
      color="background-primary"
      buttonText="Start Now"
      image={
        <img
          src="https://placehold.co/640x480?text=Primary+banner"
          alt="Primary banner"
        />
      }
    >
      <h3>Primary Background</h3>
      <p>Clean white background banner.</p>
    </BodyBanner>
  </>
);

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

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