React Carousel Component

'use client'
import { useState } from 'react'
const slides = ['Design systems', 'Accessible components', 'Fast delivery']

export function Carousel() {
  const [index, setIndex] = useState(0)
  const move = (delta: number) => setIndex(value => (value + delta + slides.length) % slides.length)
  return (
    <section aria-roledescription="carousel" aria-label="Product highlights" className="overflow-hidden rounded-2xl border">
      <div className="grid min-h-52 place-items-center bg-gradient-to-br from-violet-600 to-cyan-500 text-3xl font-bold text-white">
        {slides[index]}
      </div>
      <div className="flex items-center justify-between bg-slate-950 p-3 text-white">
        <button onClick={() => move(-1)} aria-label="Previous slide">←</button>
        <span aria-live="polite">{index + 1} / {slides.length}</span>
        <button onClick={() => move(1)} aria-label="Next slide">→</button>
      </div>
    </section>
  )
}