import { Card, CardContent } from "../ui/card";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { ReactNode, ComponentType } from "react";
import { LucideIcon } from "lucide-react";

interface MobileCardProps {
  title: string;
  subtitle?: string;
  icon?: ReactNode;
  badge?: {
    label: string;
    variant?: "default" | "secondary" | "destructive" | "outline";
  };
  fields: Array<{
    label: string;
    value: string;
    badge?: boolean;
    badgeVariant?: string;
  }>;
  actions?: Array<{
    label: string;
    onClick: () => void;
    icon?: LucideIcon | ComponentType<any>;
    variant?: "default" | "outline" | "destructive";
  }>;
  onCardClick?: () => void;
}

export function MobileCard({
  title,
  subtitle,
  icon,
  badge,
  fields,
  actions,
  onCardClick
}: MobileCardProps) {
  return (
    <Card className={onCardClick ? "cursor-pointer hover:shadow-md transition-shadow" : ""}>
      <CardContent className="p-4 cursor-pointer active:bg-muted/50 transition-colors" onClick={onCardClick}>
        <div className="space-y-3">
          {/* Header */}
          <div className="flex items-start justify-between">
            <div className="flex items-start gap-2 flex-1">
              {icon && <div className="mt-1">{icon}</div>}
              <div className="flex-1 min-w-0">
                <h4 className="font-semibold truncate">{title}</h4>
                {subtitle && (
                  <p className="text-sm text-muted-foreground truncate">
                    {subtitle}
                  </p>
                )}
              </div>
            </div>
            {badge && (
              <Badge variant={badge.variant || "default"} className="ml-2">
                {badge.label}
              </Badge>
            )}
          </div>

          {/* Fields */}
          <div className="space-y-2">
            {fields.map((field, index) => (
              <div key={`${field.label}-${index}`} className="flex justify-between items-center text-sm">
                <span className="text-muted-foreground">{field.label}</span>
                {field.badge ? (
                  <Badge variant="outline">{field.value}</Badge>
                ) : (
                  <span className="font-medium">{field.value}</span>
                )}
              </div>
            ))}
          </div>

          {/* Actions */}
          {actions && actions.length > 0 && (
            <div className="flex flex-wrap gap-2 pt-2 border-t">
              {actions.map((action, index) => {
                const Icon = action.icon;
                return (
                  <Button
                    key={`${action.label}-${index}`}
                    variant={action.variant || "outline"}
                    size="sm"
                    onClick={(e) => {
                      e.stopPropagation();
                      action.onClick();
                    }}
                    className="flex-1 min-w-[calc(50%-0.25rem)]"
                  >
                    {Icon && <Icon className="w-4 h-4 mr-1" />}
                    {action.label}
                  </Button>
                );
              })}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}