import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";

type ModuleCardProps = {
  name: string;
  completion: number;
  status: "Completado" | "En curso" | "Pendiente";
  href: string;
  answeredQuestions: number;
  totalQuestions: number;
};

export function ModuleCard({ name, completion, status, href, answeredQuestions, totalQuestions }: ModuleCardProps) {
  return (
    <Card>
      <CardContent className="space-y-3">
        <div className="flex items-start justify-between gap-2">
          <h3 className="text-base font-semibold text-[#22314b]">{name}</h3>
          <Badge variant={status === "Completado" ? "success" : status === "En curso" ? "warning" : "neutral"}>{status}</Badge>
        </div>

        <Progress value={completion} showValue />

        <p className="text-sm text-[#5f6d86]">
          {answeredQuestions}/{totalQuestions} preguntas respondidas
        </p>

        <div className="flex justify-end">
          <Link href={href}>
            <Button size="sm" variant="secondary">
              {completion >= 100 ? "Revisar" : completion > 0 ? "Continuar" : "Iniciar"}
            </Button>
          </Link>
        </div>
      </CardContent>
    </Card>
  );
}