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

export type AutoSaveStatus = "idle" | "saving" | "saved" | "error";

export type AutoSaveIndicatorProps = {
  status: AutoSaveStatus;
};

const statusConfig: Record<
  AutoSaveStatus,
  { label: string; icon: typeof Loader2; className: string; spin?: boolean }
> = {
  idle: {
    label: "Sin cambios",
    icon: Minus,
    className: "text-muted-foreground"
  },
  saving: {
    label: "Guardando...",
    icon: Loader2,
    className: "text-primary",
    spin: true
  },
  saved: {
    label: "Cambios guardados",
    icon: CheckCircle2,
    className: "text-emerald-500"
  },
  error: {
    label: "Error al guardar",
    icon: AlertTriangle,
    className: "text-destructive"
  }
};

export function AutoSaveIndicator({ status }: AutoSaveIndicatorProps) {
  const config = statusConfig[status];
  const Icon = config.icon;

  return (
    <div
      role="status"
      aria-live="polite"
      className="flex items-center gap-2 rounded-full border border-border/70 bg-card/70 px-3 py-2 text-xs font-semibold"
    >
      <Icon className={`h-4 w-4 ${config.className} ${config.spin ? "animate-spin" : ""}`} />
      <span className="text-foreground">{config.label}</span>
    </div>
  );
}