'use client';

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

export interface ArticleCardData {
  id: string;
  title: string;
  excerpt: string;
  date: string;
  image: string;
  slug: string;
}

export default function ArticleCard({
  article,
  index,
}: {
  article: ArticleCardData;
  index: number;
}) {
  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.08,
        ease: [0.22, 1, 0.36, 1],
      }}
      className="group flex flex-col gap-4"
    >
      {/* Image */}
      <Link
        href={`/articles/${article.slug}`}
        className="relative block w-full aspect-400/250 rounded-xl overflow-hidden bg-[#F3F4F6]"
      >
        <Image
          src={article.image}
          alt={article.title}
          fill
          sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"
          className="object-cover transition-transform duration-500 group-hover:scale-105"
        />
        {/* Subtle overlay on hover */}
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300" />
      </Link>

      {/* Meta + Title */}
      <div className="flex flex-col gap-1">
        {/* Date */}
        <div className="flex items-center gap-1.5 text-[#7D7D7D]">
          <CalendarDays className="w-4 h-4" />
          <span className="text-xs">{article.date}</span>
        </div>

        {/* Title */}
        <Link href={`/articles/${article.slug}`}>
          <h3 className="text-[15px] sm:text-base font-bold text-[#090909] leading-snug line-clamp-2 group-hover:text-[#6E5904] transition-colors duration-200 uppercase">
            {article.title}
          </h3>
        </Link>
      </div>

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

      {/* Read More Button */}
      <Link
        href={`/articles/${article.slug}`}
        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
      </Link>
    </motion.article>
  );
}