import { Badge } from "@/components/ui/badge";
import { Check, X, Loader2 } from "lucide-react";
import { useIsMobile } from "@/hooks/use-mobile";
import { StepValidationStatus } from "@/types";

interface StepStatusBadgeProps {
  validationStatus: StepValidationStatus;
  pendingStatus: 'validating' | 'rejecting' | null;
  isPublished?: boolean;
}

export function StepStatusBadge({
  validationStatus,
  pendingStatus,
  isPublished
}: StepStatusBadgeProps) {
  const isMobile = useIsMobile();

  // Don't display publish status on mobile
  if (isMobile) {
    return renderValidationBadges();
  }

  return renderValidationBadges();

  function renderValidationBadges() {
    if (pendingStatus === 'validating') {
      return (
        <Badge variant="outline" className="bg-amber-50 text-amber-600 border-amber-200 flex items-center gap-1">
          <Loader2 className="h-3 w-3 animate-spin" />
          <span className="text-xs">Validation...</span>
        </Badge>
      );
    }

    if (pendingStatus === 'rejecting') {
      return (
        <Badge variant="outline" className="bg-amber-50 text-amber-600 border-amber-200 flex items-center gap-1">
          <Loader2 className="h-3 w-3 animate-spin" />
          <span className="text-xs">Refus...</span>
        </Badge>
      );
    }

    if (validationStatus === "approved") {
      return (
        <Badge variant="outline" className="status-success flex items-center gap-1">
          <Check className="h-3 w-3" />
          <span className="text-xs">Approuvé</span>
        </Badge>
      );
    }

    if (validationStatus === "rejected") {
      return (
        <Badge variant="outline" className="bg-red-50 text-red-600 border-red-200 flex items-center gap-1">
          <X className="h-3 w-3" />
          <span className="text-xs">Refusé</span>
        </Badge>
      );
    }

    return (
      <Badge variant="outline" className="bg-slate-50 text-slate-600 border-slate-200">
        <span className="text-xs">En attente</span>
      </Badge>
    );
  }
}