'use client';

import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import type { CSRCardData } from './CSRCard';

export default function CSRFeatured({ csr }: { csr: CSRCardData }) {
  return (
    <section className="bg-white overflow-hidden">
      {/* Single Banner Image */}
      <div className="relative w-full">
        <motion.div
          key={`${csr.id}-img-banner`}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.6 }}
          className="relative w-full overflow-hidden aspect-video md:aspect-21/9 lg:aspect-24/9 max-h-[600px]"
        >
          <Image
            src={csr.image}
            alt={csr.title}
            fill
            sizes="100vw"
            className="object-cover"
          />
          {/* Bottom gradient fade to white */}
          <div className="absolute bottom-0 left-0 right-0 h-[100px] bg-linear-to-t from-white to-transparent pointer-events-none" />
        </motion.div>
      </div>

      {/* Featured Detail */}
      <AnimatePresence mode="wait">
        <motion.div
          key={csr.id}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.5 }}
          className="container mx-auto px-4 py-8 md:py-12"
        >
          <div className="max-w-[1000px] mx-auto text-center md:text-left">
            {/* Date Badge */}
            <div className="mb-4">
              <span className="inline-flex items-center px-5 py-2 bg-[#F5B700] rounded-full text-sm font-semibold text-black">
                {csr.date}
              </span>
            </div>

            {/* Title */}
            <h2 className="font-title text-2xl sm:text-3xl md:text-[40px] leading-snug text-black mb-6">
              {csr.title}
            </h2>

            {/* Description */}
            <p className="text-lg sm:text-xl text-[#070707] leading-relaxed whitespace-pre-wrap">
              {csr.fullDescription || csr.excerpt}
            </p>
          </div>
        </motion.div>
      </AnimatePresence>
    </section>
  );
}