'use client';

import Link from 'next/link';
import { LucideIcon } from 'lucide-react';

interface ModuleCardProps {
  title: string;
  description: string;
  icon: LucideIcon;
  href: string;
  color?: string;
}

export default function ModuleCard({
  title,
  description,
  icon: Icon,
  href,
  color = 'forge-yellow',
}: ModuleCardProps) {
  return (
    <Link href={href} className="module-card group block h-full">
      <div className={`w-12 h-12 bg-${color}/10 rounded-lg flex items-center justify-center mb-4 group-hover:bg-${color}/20 transition-colors`}>
        <Icon className={`w-6 h-6 text-${color}`} />
      </div>
      <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
      <p className="text-gray-400 text-sm">{description}</p>
    </Link>
  );
}