Carousel

import { Carousel } from "@compa11y/react";

import { Carousel, Button } from "@compa11y/react";

function ImageCarousel() {
  const slides = [
    { title: "Accessible by Default", desc: "Every component ships with ARIA, keyboard, and screen reader support." },
    { title: "React + Web Components", desc: "Use the same primitives in React or any framework via CDN." },
    { title: "Zero Configuration", desc: "Install, import, render. Accessibility is built in." },
  ];

  return (
    <Carousel ariaLabel="Feature highlights" loop autoplay>
      <Carousel.Content>
        {slides.map((slide, i) => (
          <Carousel.Item key={i}>
            <h3>{slide.title}</h3>
            <p>{slide.desc}</p>
          </Carousel.Item>
        ))}
      </Carousel.Content>
      <Carousel.Controls>
        <Carousel.Prev>
          <Button variant="ghost" size="sm">Previous</Button>
        </Carousel.Prev>
        <Carousel.Pagination />
        <Carousel.Next>
          <Button variant="ghost" size="sm">Next</Button>
        </Carousel.Next>
      </Carousel.Controls>
      <Carousel.Pause />
      <Carousel.Status />
    </Carousel>
  );
}