"use client";
import { motion } from "framer-motion";

interface IconCardProps {
  icon: string;
  title: string;
  description: string;
  delay?: number;
  variant?: "default" | "elevated" | "bordered";
}

export default function IconCard({
  icon,
  title,
  description,
  delay = 0,
  variant = "default",
}: IconCardProps) {
  const variants = {
    default:
      "bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700",
    elevated:
      "bg-gradient-to-br from-white to-slate-50 dark:from-slate-800 dark:to-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-lg",
    bordered:
      "bg-transparent border-2 border-brand-green/20 hover:border-brand-green/40",
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay }}
      whileHover={{ y: -5, scale: 1.02 }}
      className={`
        group relative overflow-hidden
        rounded-2xl border p-6
        ${variants[variant]}
        shadow-sm hover:shadow-xl
        transition-all duration-300
      `}
    >
      {/* Gradient hover overlay */}
      <div className="absolute inset-0 bg-gradient-to-br from-brand-green/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

      {/* Icon container with animation */}
      <motion.div
        whileHover={{ scale: 1.1, rotate: [0, -10, 10, 0] }}
        transition={{ duration: 0.4 }}
        className="relative text-4xl mb-4 w-14 h-14 flex items-center justify-center rounded-xl bg-gradient-to-br from-brand-green/10 to-emerald-100/50 dark:from-brand-green/20 dark:to-slate-700"
      >
        {icon}
      </motion.div>

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

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

      {/* Bottom accent line */}
      <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-brand-green to-emerald-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left" />
    </motion.div>
  );
}