"use client";

import { AlertTriangle, CheckCircle2, HelpCircle } from "lucide-react";

type Props = {
  drift: boolean;
  // When false, Coolify was unreachable: drift state is unknown, not "synced".
  coolifyAvailable?: boolean;
};

// Filled pill chips matching IA-redesign mockup 15 (.c-synced / .c-drift).
export function DriftBadge({ drift, coolifyAvailable = true }: Props) {
  if (!coolifyAvailable) {
    return (
      <span
        className="inline-flex items-center gap-1 rounded-full bg-rule-soft text-ink-muted text-[0.72rem] font-semibold px-2.5 py-0.5"
        title="Coolify לא זמין — מצב ה-drift לא ידוע"
      >
        <HelpCircle className="w-3 h-3" />
        Unknown
      </span>
    );
  }
  if (drift) {
    return (
      <span className="inline-flex items-center gap-1 rounded-full bg-warn-bg text-warn text-[0.72rem] font-semibold px-2.5 py-0.5">
        <AlertTriangle className="w-3 h-3" />
        Drift
      </span>
    );
  }
  return (
    <span className="inline-flex items-center gap-1 rounded-full bg-success-bg text-success text-[0.72rem] font-semibold px-2.5 py-0.5">
      <CheckCircle2 className="w-3 h-3" />
      Synced
    </span>
  );
}
