import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Link } from "@inertiajs/react";
import { ArrowRight } from "lucide-react";
import React from "react";

export type ModuleCardProps = {
  title: string;
  description: string;
  url: string;
  icon: React.ElementType;
  badge: string;
  badgeIcon?: React.ElementType;
  badgeVariant?: "default" | "secondary" | "outline" | "destructive";
  disabled?: boolean;
};

export const ModuleCard: React.FC<ModuleCardProps> = ({
  title,
  description,
  url,
  icon: Icon,
  badge,
  badgeIcon: BadgeIcon,
  badgeVariant = "default",
  disabled = false,
}) => (
  <Card className="flex flex-col justify-between h-full transition-transform duration-150 hover:scale-[1.03] hover:shadow-lg">
    <CardHeader className="flex flex-row items-center justify-between gap-2 pb-2">
      <span className="flex items-center gap-2">
        <Icon className="h-8 w-8 text-primary" />
        <CardTitle className="text-lg font-semibold text-left">
          {title}
        </CardTitle>
      </span>
      <Badge variant={badgeVariant} className="px-2 py-0.5 text-xs font-medium flex items-center gap-1">
        {BadgeIcon && <BadgeIcon className="h-3 w-3 mr-1" />}
        {badge}
      </Badge>
    </CardHeader>
    <CardContent className="pb-2 flex-1 flex items-start">
      <div className="text-sm text-muted-foreground text-left" title={description}>
        {description}
      </div>
    </CardContent>
    <CardFooter className="pt-0 flex justify-end">
      <Link
        href={url}
        style={{ textDecoration: 'none' }}
        tabIndex={-1}
        className={disabled ? "pointer-events-none" : ""}
        aria-disabled={disabled}
      >
        <Button
          variant="outline"
          className={`cursor-pointer${disabled ? " pointer-events-none opacity-60" : ""}`}
          disabled={disabled}
        >
          <ArrowRight className="mr-2 h-4 w-4" /> Ir al módulo
        </Button>
      </Link>
    </CardFooter>
  </Card>
);