Apple Cards Carousel

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

export function AppleCarousel({ cards }: { cards: { tag: string; title: string; bg: string }[] }) {
  const [active, setActive] = useState(0);
  return (
    <div className="flex snap-x snap-mandatory gap-4 overflow-x-auto px-6 pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
      {cards.map((c, i) => (
        <button key={c.title} onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)}
          className="h-48 w-40 shrink-0 snap-center overflow-hidden rounded-2xl p-4 text-left transition-all duration-500"
          style={{ background: c.bg, transform: active === i ? "scale(1)" : "scale(0.92)", opacity: active === i ? 1 : 0.6 }}>
          <span className="text-[11px] font-medium uppercase tracking-wider text-white/70">{c.tag}</span>
          <p className="mt-2 text-lg font-semibold leading-tight text-white">{c.title}</p>
        </button>
      ))}
    </div>
  );
}