"use client";

import { mediaUrl } from "@/app/lib/media";
import type { DatingProfile } from "../types";
import SwipeCard from "./SwipeCard";

interface SwipeStackProps {
  current: DatingProfile;
  next?: DatingProfile;
  badgeText: string;
  dragX: number;
  isDragging: boolean;
  isAnimatingOut: "left" | "right" | null;
  onLike: () => void;
  onDislike: () => void;
  onBeginDrag: (clientX: number) => void;
  onMoveDrag: (clientX: number) => void;
  onEndDrag: () => void;
  t: (key: string) => string;
}

export default function SwipeStack({
  current,
  next,
  badgeText,
  dragX,
  isDragging,
  isAnimatingOut,
  onLike,
  onDislike,
  onBeginDrag,
  onMoveDrag,
  onEndDrag,
  t,
}: SwipeStackProps) {
  return (
    <div className="relative">
      {next ? (
        <div
          aria-hidden
          className={`pointer-events-none absolute inset-x-0 top-3 mx-auto w-[92%] scale-[0.96] rounded-2xl bg-gradient-to-br ${next.gradient} opacity-70 shadow-lg`}
        >
          <div className="flex justify-center py-10">
            <img
              src={mediaUrl(next.photo)}
              alt=""
              className="h-20 w-20 rounded-full border-4 border-white/40 object-cover"
            />
          </div>
          <div className="pb-6 text-center text-sm font-semibold text-white/90">{next.name}</div>
        </div>
      ) : null}
      <div className="relative z-10">
        <SwipeCard
          profile={current}
          badgeText={badgeText}
          dragX={dragX}
          isDragging={isDragging}
          isAnimatingOut={isAnimatingOut}
          onLike={onLike}
          onDislike={onDislike}
          onBeginDrag={onBeginDrag}
          onMoveDrag={onMoveDrag}
          onEndDrag={onEndDrag}
          t={t}
        />
      </div>
    </div>
  );
}