'use client';

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

interface Recipe {
  id: string | number;
  title: string;
  image: string;
  description?: string;
}

interface RecipeCardProps {
  recipe: Recipe;
  index: number;
}

export function RecipeCard({ recipe, index }: RecipeCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.1, ease: [0.22, 1, 0.36, 1] }}
      whileHover={{ y: -4 }}
      className="bg-[#FFFAEC] rounded-[16px] md:rounded-[30px] shadow-[4px_4px_4px_0px_rgba(0,0,0,0.25)] hover:shadow-lg transition-all duration-300 overflow-hidden"
    >
      <Link
        href={`/recipes/${recipe.id}`}
        className="block h-full flex flex-col group p-4 md:p-6 xl:p-9"
      >
        {/* Title and description */}
        <div className="mb-3 md:mb-5 xl:mb-8">
          <h3 className="text-lg sm:text-2xl md:text-2xl xl:text-[32px] font-bold text-[#6E5904] leading-tight mb-1 md:mb-2 capitalize tracking-tight md:tracking-[-0.53px] line-clamp-1">
            {recipe.title}
          </h3>
          {recipe.description && (
            <p className="text-[11px] sm:text-sm text-[#1C1D1F] leading-[1.3] md:leading-[1.4] font-light line-clamp-2">
              {recipe.description}
            </p>
          )}
        </div>

        {/* Large recipe image */}
        <div className="relative w-full h-[150px] sm:h-[250px] md:h-[250px] lg:h-[280px] xl:h-[395px] rounded-[12px] md:rounded-[30px] overflow-hidden mb-4 md:mb-5 xl:mb-8">
          <Image
            src={recipe.image}
            alt={recipe.title}
            fill
            loading="lazy"
            sizes="(max-width: 640px) 260px, (max-width: 768px) 320px, 33vw"
            className="object-cover transition-all duration-500 group-hover:scale-110"
          />
        </div>

        {/* CTA Button */}
        <div className="mt-auto">
          <div className="w-full py-2 px-3 md:py-2.5 md:px-4 bg-[#FFD738] rounded-[12px] md:rounded-[20px] flex items-center justify-between text-[#6E5904] group-hover:bg-[#F5C800] transition-colors">
            <span className="text-[10px] md:text-[13px] capitalize font-medium">
              lihat resep selengkapnya
            </span>
            <div className="w-5 h-5 md:w-6 md:h-6 bg-white rounded-full flex items-center justify-center">
              <ChevronRight className="w-3 h-3 md:w-3.5 md:h-3.5 text-[#6E5904]" />
            </div>
          </div>
        </div>
      </Link>
    </motion.div>
  );
}