'use client';

import Image from 'next/image';
import { Link } from '@/i18n/routing';
import { motion } from 'framer-motion';
import { ArrowRight } from 'lucide-react';

interface TourCardProps {
  item: {
    id: number;
    slug: string;
    title: string;
    image: string;
    price: string;
  };
  basePath: string; // e.g. "/turlar", "/aktiviteler"
  index?: number;
}

export function TourCard({ item, basePath, index = 0 }: TourCardProps) {
  return (
    <motion.div 
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-50px" }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      className="bg-white/80 backdrop-blur-md rounded-3xl overflow-hidden shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgb(0,0,0,0.08)] transition-all duration-500 border border-white/50 flex flex-col group"
    >
      <div className="relative aspect-[4/3] w-full overflow-hidden">
        <Image 
          src={item.image} 
          alt={item.title} 
          fill
          className="object-cover group-hover:scale-110 transition-transform duration-700 ease-out"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
        <div className="absolute top-4 right-4 bg-white/90 backdrop-blur-md px-4 py-1.5 rounded-full text-sm font-extrabold text-vibrantorange-500 shadow-lg transform group-hover:scale-105 transition-transform duration-300">
          {item.price}
        </div>
      </div>
      <div className="p-6 flex flex-col flex-1 relative bg-gradient-to-b from-white/50 to-white">
        <h3 className="font-bold text-xl mb-3 text-deepblue-900 line-clamp-2 flex-1 group-hover:text-turquoise-500 transition-colors">{item.title}</h3>
        <Link 
          href={`${basePath}/${item.slug}`} 
          className="mt-4 flex items-center justify-center gap-2 w-full py-3 bg-gradient-to-r from-turquoise-500 to-deepblue-900 hover:from-deepblue-900 hover:to-turquoise-500 text-white font-semibold rounded-2xl transition-all duration-500 shadow-md hover:shadow-xl transform hover:-translate-y-1"
        >
          <span>Hemen İncele</span>
          <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
        </Link>
      </div>
    </motion.div>
  );
}