Image Carousel

"use client";
import { useState } from "react";

export function Carousel({ slides }: { slides: { title: string; bg: string }[] }) {
  const [i, setI] = useState(0);
  return (
    <div className="w-64">
      <div className="relative overflow-hidden rounded-xl">
        <div className="flex transition-transform duration-500 ease-out" style={{ transform: `translateX(-${i * 100}%)` }}>
          {slides.map((s) => (
            <div key={s.title} className="grid h-36 w-64 shrink-0 place-items-center text-sm font-semibold text-white" style={{ background: s.bg }}>
              {s.title}
            </div>
          ))}
        </div>
        <button aria-label="Previous" onClick={() => setI((p) => (p - 1 + slides.length) % slides.length)}
          className="absolute left-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-full bg-black/40 text-white backdrop-blur">‹</button>
        <button aria-label="Next" onClick={() => setI((p) => (p + 1) % slides.length)}
          className="absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-full bg-black/40 text-white backdrop-blur">›</button>
      </div>
      <div className="mt-3 flex justify-center gap-2">
        {slides.map((s, n) => (
          <button key={s.title} aria-label={`Go to ${s.title}`} onClick={() => setI(n)}
            className={`h-2 rounded-full transition-all ${n === i ? "w-6 bg-brand" : "w-2 bg-muted"}`} />
        ))}
      </div>
    </div>
  );
}