"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import Image from "next/image";
import Link from "next/link";
import { Experience } from "@/lib/constants";

interface ExperienceCardProps {
  experience: Experience;
  index?: number;
}

export function ExperienceCard({ experience, index = 0 }: ExperienceCardProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-50px" });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 30 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ delay: index * 0.1, duration: 0.6 }}
    >
      <Link href={`/experiences/${experience.slug}`} className="group block h-full">
        <div className="bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-lg transition-all h-full flex flex-col">
          <div className="relative aspect-[4/3] overflow-hidden">
            <Image
              src={experience.image}
              alt={`${experience.name} — ${experience.hook}`}
              fill
              className="object-cover group-hover:scale-105 transition-transform duration-700"
              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
            />
          </div>
          <div className="p-6 flex flex-col flex-1">
            <p className="text-bosphorus font-semibold text-xs tracking-widest uppercase mb-1">
              {experience.tagline}
            </p>
            <h3 className="font-display text-xl font-bold text-deep-nazar mb-2">
              {experience.name}
            </h3>
            <p className="text-deep-nazar/70 text-sm leading-relaxed mb-4 flex-1">
              {experience.hook}
            </p>
            <div className="flex items-center gap-4 mb-4 text-xs text-deep-nazar/60">
              <span>{experience.duration}</span>
              <span>{experience.groupSize}</span>
            </div>
            <div className="flex items-center justify-between pt-4 border-t border-deep-nazar/10">
              <div>
                <span className="text-xs text-deep-nazar/60">From </span>
                <span className="text-xl font-bold text-deep-nazar">
                  &euro;{experience.price}
                </span>
              </div>
              <span className="text-coral-spritz font-semibold text-sm group-hover:underline">
                Book Now &rarr;
              </span>
            </div>
          </div>
        </div>
      </Link>
    </motion.div>
  );
}