'use client';

import Image from 'next/image';
import { motion } from 'framer-motion';

export interface EventPromoCardData {
  id: string;
  title: string;
  excerpt: string;
  fullDescription?: string;
  date: string;
  image: string;
  slug: string;
}

export default function EventPromoCard({
  item,
  index,
  onSelect,
}: {
  item: EventPromoCardData;
  index: number;
  onSelect: (item: EventPromoCardData) => void;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-50px' }}
      transition={{ delay: index * 0.15, duration: 0.6 }}
      onClick={() => onSelect(item)}
      className="snap-center shrink-0 w-[280px] md:w-[320px] lg:w-[340px] relative rounded-[24px] md:rounded-[32px] overflow-hidden border-2 border-white/10 cursor-pointer"
      style={{ aspectRatio: '4/5' }}
    >
      <Image
        src={item.image}
        alt={item.title}
        fill
        sizes="(max-width: 768px) 280px, (max-width: 1024px) 320px, 340px"
        className="object-cover hover:scale-105 transition-transform duration-500"
      />
    </motion.div>
  );
}