client/src/components/ModuleCard.tsx

import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ArrowRight } from "lucide-react";
import { useLocation } from "wouter";

interface ModuleCardProps {
  title: string;
  description: string;
  icon: React.ReactNode;
  route: string;
  borderColor: string;
  iconGradient: string;
  features: { icon: React.ReactNode; text: string }[];
  status?: string;
}

export default function ModuleCard({
  title,
  description,
  icon,
  route,
  borderColor,
  iconGradient,
  features,
  status = "Active"
}: ModuleCardProps) {
  const [, setLocation] = useLocation();

  return (
    <Card className={`hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border-l-4 ${borderColor}`}>
      <CardContent className="p-6">
        <div className="flex items-center justify-between mb-4">
          <div className={`w-12 h-12 ${iconGradient} rounded-lg flex items-center justify-center`}>
            {icon}
          </div>
          <Badge variant="secondary" className="bg-emerald-100 text-emerald-800">
            {status}
          </Badge>
        </div>
        <h3 className="text-xl font-poppins font-semibold text-deep-charcoal mb-2">{title}</h3>
        <p className="text-warm-gray mb-4">{description}</p>
        <div className="flex justify-between items-center">
          <div className="flex items-center space-x-4 text-sm text-warm-gray">
            {features.map((feature, index) => (
              <span key={index} className="flex items-center">
                {feature.icon}
                <span className="ml-1">{feature.text}</span>
              </span>
            ))}
          </div>
          <Button 
            variant="ghost" 
            size="sm"
            onClick={() => setLocation(route)}
            className="text-saffron hover:text-warm-orange"
          >
            <ArrowRight className="w-4 h-4" />
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}