kit-ui/components/ToolCard.tsx

'use client';

import { motion } from 'framer-motion';
import { ReactNode } from 'react';

interface ToolCardProps {
  title: string;
  description: string;
  icon: ReactNode;
  url: string;
  gradient: string;
  accentColor: string;
  index: number;
  badges?: string[];
}

export default function ToolCard({ title, description, icon, url, gradient, accentColor, index, badges }: ToolCardProps) {
  return (
    <motion.a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className="group relative block"
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay: index * 0.1 }}
      whileHover={{ y: -10 }}
    >
      <div className="glass relative overflow-hidden rounded-2xl p-8 h-full transition-all duration-300 group-hover:shadow-2xl">
        {/* Gradient overlay on hover */}
        <div
          className={`absolute inset-0 opacity-0 group-hover:opacity-15 transition-opacity duration-300 ${gradient}`}
        />

        {/* Glow effect */}
        <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl -z-10">
          <div className={`w-full h-full ${gradient} opacity-30`} />
        </div>

        {/* Icon */}
        <motion.div
          className="mb-6 flex justify-center"
          whileHover={{ scale: 1.1, rotate: 5 }}
          transition={{ type: 'spring', stiffness: 300 }}
        >
          <div className={`p-4 rounded-xl ${gradient}`}>
            {icon}
          </div>
        </motion.div>

        {/* Title */}
        <h3
          className="text-2xl font-bold mb-3 text-white transition-all duration-300"
          style={{
            color: 'white',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.color = accentColor;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.color = 'white';
          }}
        >
          {title}
        </h3>

        {/* Badges */}
        {badges && badges.length > 0 && (
          <div className="flex flex-wrap gap-2 mb-3">
            {badges.map((badge) => (
              <span
                key={badge}
                className="text-xs px-2 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400"
              >
                {badge}
              </span>
            ))}
          </div>
        )}

        {/* Description */}
        <p className="text-gray-400 group-hover:text-gray-300 transition-colors duration-300">
          {description}
        </p>

        {/* Arrow icon */}
        <motion.div
          className="absolute bottom-8 right-8 text-gray-400 group-hover:text-gray-200 transition-colors duration-300"
          initial={{ x: 0 }}
          whileHover={{ x: 5 }}
        >
          <svg
            className="w-6 h-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M13 7l5 5m0 0l-5 5m5-5H6"
            />
          </svg>
        </motion.div>
      </div>
    </motion.a>
  );
}