'use client';

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

export interface CSRCardData {
  id: string;
  title: string;
  excerpt: string;
  fullDescription?: string;
  date: string;
  image: string;
  gallery?: string[];
  slug: string;
}

export default function CSRCard({
  csr,
  index,
  onSelect,
}: {
  csr: CSRCardData;
  index: number;
  onSelect: (csr: CSRCardData) => void;
}) {
  return (
    <motion.article
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: '-50px' }}
      transition={{
        duration: 0.5,
        delay: index * 0.1,
        ease: [0.22, 1, 0.36, 1],
      }}
      className="group flex flex-col gap-4 w-[280px] sm:w-[320px] md:w-[400px] shrink-0"
    >
      {/* Image */}
      <button
        onClick={() => onSelect(csr)}
        className="relative block w-full aspect-400/265 rounded-xl overflow-hidden bg-[#F3F4F6] text-left cursor-pointer"
      >
        <Image
          src={csr.image}
          alt={csr.title}
          fill
          sizes="400px"
          className="object-cover transition-transform duration-500 group-hover:scale-105"
        />
        {/* Date badge */}
        <div className="absolute bottom-3 left-3">
          <span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[#F5B700] rounded-full text-xs font-medium text-black">
            <CalendarDays className="w-3.5 h-3.5" />
            {csr.date}
          </span>
        </div>
      </button>

      {/* Title */}
      <button onClick={() => onSelect(csr)} className="text-left">
        <h3 className="text-base font-bold text-[#090909] leading-snug line-clamp-1 group-hover:text-[#6E5904] transition-colors duration-200 uppercase">
          {csr.title}
        </h3>
      </button>

      {/* Excerpt */}
      <p className="text-xs text-[#090909] leading-relaxed line-clamp-3">
        {csr.excerpt}
      </p>

      {/* Read More Button */}
      <button
        onClick={() => onSelect(csr)}
        className="mt-auto w-full flex items-center justify-center h-10 bg-[#FFD738] text-[#6E5904] font-semibold text-sm sm:text-base rounded-xl shadow-[0_4px_2px_rgba(0,0,0,0.25)] hover:bg-[#F5C800] hover:shadow-[0_6px_6px_rgba(0,0,0,0.2)] active:shadow-[0_2px_1px_rgba(0,0,0,0.25)] active:translate-y-px transition-all duration-200"
      >
        Read more
      </button>
    </motion.article>
  );
}