Swipe Stack

import { Component as SwipeStack } from "@/components/ui/swipe-stack";
import { useState } from "react";
import { Heart, X, Star, Quote, RotateCcw } from "lucide-react";

const TESTIMONIALS = [
  {
    quote: "This completely transformed our workflow. We shipped 3x faster within the first month.",
    name: "Sarah Chen",
    role: "CTO at Vercel",
    avatar: "SC",
    color: "from-violet-500 to-indigo-500",
    stars: 5,
  },
  {
    quote: "The best developer tool I have used in years. Clean API, incredible performance.",
    name: "Marcus Rivera",
    role: "Lead Engineer at Stripe",
    avatar: "MR",
    color: "from-cyan-500 to-blue-500",
    stars: 5,
  },
  {
    quote: "Our team adopted it overnight. Zero learning curve, massive productivity gains.",
    name: "Aiko Tanaka",
    role: "VP of Engineering at Linear",
    avatar: "AT",
    color: "from-emerald-500 to-teal-500",
    stars: 5,
  },
  {
    quote: "I was skeptical at first but the results speak for themselves. 10x improvement.",
    name: "James O'Brien",
    role: "Founder at Railway",
    avatar: "JO",
    color: "from-orange-500 to-amber-500",
    stars: 4,
  },
  {
    quote: "Finally, a tool that just works. No config, no setup, just results.",
    name: "Priya Sharma",
    role: "Staff Engineer at Figma",
    avatar: "PS",
    color: "from-pink-500 to-rose-500",
    stars: 5,
  },
];

function TestimonialCard({
  quote,
  name,
  role,
  avatar,
  color,
  stars,
}: (typeof TESTIMONIALS)[number]) {
  return (
    <div className="w-full h-full rounded-2xl border border-white/10 bg-neutral-900 p-8 flex flex-col justify-between overflow-hidden relative">
      {/* Gradient accent */}
      <div
        className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${color}`}
      />

      <div>
        <Quote className="size-8 text-white/10 mb-4" />
        <p className="text-white text-lg leading-relaxed font-medium">
          {quote}
        </p>
        <div className="flex gap-0.5 mt-4">
          {Array.from({ length: 5 }).map((_, i) => (
            <Star
              key={i}
              className={`size-4 ${i < stars ? "text-amber-400 fill-amber-400" : "text-neutral-700"}`}
            />
          ))}
        </div>
      </div>

      <div className="flex items-center gap-3 mt-6">
        <div
          className={`size-10 rounded-full bg-gradient-to-br ${color} flex items-center justify-center text-white text-xs font-bold`}
        >
          {avatar}
        </div>
        <div>
          <p className="text-sm font-semibold text-white">{name}</p>
          <p className="text-xs text-neutral-400">{role}</p>
        </div>
      </div>
    </div>
  );
}

export default function Demo() {
  const [swiped, setSwiped] = useState<{ dir: string; idx: number }[]>([]);
  const [key, setKey] = useState(0);

  const handleSwipe = (dir: "left" | "right", idx: number) => {
    setSwiped((prev) => [...prev, { dir, idx }]);
  };

  const handleReset = () => {
    setSwiped([]);
    setKey((k) => k + 1);
  };

  const likes = swiped.filter((s) => s.dir === "right").length;
  const nopes = swiped.filter((s) => s.dir === "left").length;

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-[#030712] p-8">
      <div className="w-full max-w-md mx-auto">
        <div className="text-center mb-8">
          <h2 className="text-2xl font-bold tracking-tight text-white mb-2">
            Swipe Stack
          </h2>
          <p className="text-sm text-neutral-400">
            Drag cards left or right. Flick to dismiss.
          </p>
        </div>

        {/* Stats */}
        <div className="flex justify-center gap-6 mb-6">
          <div className="flex items-center gap-2">
            <div className="size-8 rounded-full bg-red-500/10 border border-red-500/20 flex items-center justify-center">
              <X className="size-4 text-red-400" />
            </div>
            <span className="text-sm font-mono text-neutral-400">{nopes}</span>
          </div>
          <div className="flex items-center gap-2">
            <div className="size-8 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
              <Heart className="size-4 text-emerald-400" />
            </div>
            <span className="text-sm font-mono text-neutral-400">{likes}</span>
          </div>
        </div>

        {/* Stack */}
        <SwipeStack
          key={key}
          className="w-full h-[360px]"
          onSwipe={handleSwipe}
          swipeThreshold={80}
          visibleCount={3}
          scaleStep={0.04}
          offsetStep={10}
          rotationFactor={12}
        >
          {TESTIMONIALS.map((t, i) => (
            <TestimonialCard key={i} {...t} />
          ))}
        </SwipeStack>

        {/* Reset button */}
        {swiped.length >= TESTIMONIALS.length && (
          <div className="flex justify-center mt-8">
            <button
              onClick={handleReset}
              className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-5 py-2.5 text-sm font-medium text-white hover:bg-white/10 transition-colors cursor-pointer"
            >
              <RotateCcw className="size-4" />
              Start over
            </button>
          </div>
        )}
      </div>
    </div>
  );
}