"use client";
import { motion } from "framer-motion";
import type { ReactNode } from "react";

interface FeatureCardProps {
  icon: string | ReactNode;
  title: string;
  description: string;
  gradient?: string;
  delay?: number;
  badge?: string;
}

export default function FeatureCard({
  icon,
  title,
  description,
  gradient = "from-slate-50 to-white",
  delay = 0,
  badge,
}: FeatureCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay }}
      whileHover={{
        y: -8,
        boxShadow: "0 25px 50px -12px rgba(15, 153, 114, 0.25)",
      }}
      className={`
        group relative overflow-hidden
        rounded-2xl border border-slate-200 dark:border-slate-700
        bg-gradient-to-br ${gradient}
        dark:from-slate-800 dark:to-slate-900
        p-6 transition-all duration-300
        hover:border-brand-green/40
      `}
    >
      {/* Floating orb background effect */}
      <div className="absolute -top-10 -right-10 w-32 h-32 bg-brand-green/10 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

      {/* Badge if provided */}
      {badge && (
        <div className="absolute top-4 right-4">
          <span className="px-2 py-1 text-xs font-medium bg-brand-green/10 text-brand-green rounded-full">
            {badge}
          </span>
        </div>
      )}

      {/* Icon with animated container */}
      <motion.div
        whileHover={{ scale: 1.15, rotate: 5 }}
        transition={{ type: "spring", stiffness: 300 }}
        className="relative text-4xl mb-4 w-16 h-16 flex items-center justify-center rounded-2xl bg-white dark:bg-slate-800 shadow-lg shadow-slate-200/50 dark:shadow-slate-900/50 group-hover:shadow-brand-green/20"
      >
        {icon}
      </motion.div>

      <h3 className="relative text-xl font-semibold text-brand-ink dark:text-white mb-3">
        {title}
      </h3>

      <p className="relative text-slate-600 dark:text-slate-300 leading-relaxed">
        {description}
      </p>

      {/* Animated corner accent */}
      <div className="absolute bottom-0 right-0 w-24 h-24 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <svg
          viewBox="0 0 100 100"
          className="w-full h-full text-brand-green/10"
        >
          <path d="M100 100 L100 0 Q100 100 0 100 Z" fill="currentColor" />
        </svg>
      </div>

      {/* Learn more indicator */}
      <motion.div
        initial={{ opacity: 0, x: -10 }}
        whileHover={{ opacity: 1, x: 0 }}
        className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity"
      >
        <span className="text-brand-green text-sm font-medium flex items-center gap-1">
          Learn more
          <motion.span
            animate={{ x: [0, 4, 0] }}
            transition={{ duration: 1, repeat: Infinity }}
          >
            →
          </motion.span>
        </span>
      </motion.div>
    </motion.div>
  );
}