'use client';

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

interface Feature {
  title: string;
  desc: string;
  icon: string;
}

interface FeatureCardProps {
  feature: Feature;
  index: number;
}

export function FeatureCard({ feature, index }: FeatureCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.92 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.1, ease: [0.22, 1, 0.36, 1] }}
      whileHover={{ y: -4 }}
      className="p-6 xl:p-8 bg-[#FFFAEC] rounded-[30px] shadow-[4px_4px_6.2px_0px_rgba(0,0,0,0.25)] hover:shadow-lg transition-all duration-300 relative overflow-hidden group"
    >
      {/* Icon placeholder — mimics the Figma icon area */}
      <div className="w-[50px] h-[46px] mb-4 xl:mb-5 flex items-center justify-center">
        <div className="flex items-center justify-center">
          <Image
            width={52}
            height={52}
            src={feature.icon}
            alt={feature.title}
          />
        </div>
      </div>

      <h3 className="text-base xl:text-lg font-bold uppercase mb-2 text-[#6E5904] tracking-[-0.53px]">
        {feature.title}
      </h3>
      <p className="text-sm xl:text-base text-[#6E5904] leading-relaxed tracking-[-0.53px]">
        {feature.desc}
      </p>
    </motion.div>
  );
}