"use client";

import { useTranslations } from "next-intl";
import type { HeatmapPoint } from "@/hooks/use-heatmap-data";

interface MapPopupProps {
  point: HeatmapPoint;
  onClose: () => void;
}

export function MapPopup({ point, onClose }: MapPopupProps) {
  const t = useTranslations("continentMap");
  const tPopup = useTranslations("clawPopup");

  return (
    <div className="min-w-[200px]">
      <div className="flex items-center justify-between">
        <div>
          <p className="font-mono text-sm font-medium text-[var(--accent-cyan)]">
            {point.city}
          </p>
          <p className="text-xs text-[var(--text-muted)]">{point.country}</p>
        </div>
        <button
          onClick={onClose}
          className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
        >
          ✕
        </button>
      </div>
      <div className="mt-2 flex gap-2">
        <span className="rounded-full bg-[var(--accent-cyan)]/10 px-2 py-0.5 text-xs text-[var(--accent-cyan)]">
          {tPopup("total", { count: point.clawCount })}
        </span>
        <span className="rounded-full bg-green-500/10 px-2 py-0.5 text-xs text-green-400">
          {tPopup("online", { count: point.onlineCount })}
        </span>
      </div>
      {point.claws.length > 0 && (
        <div className="mt-3 max-h-40 space-y-1.5 overflow-y-auto">
          {point.claws.map((claw) => (
            <div key={claw.id} className="flex items-center gap-2">
              <span
                className={`h-1.5 w-1.5 rounded-full ${
                  claw.isOnline ? "bg-green-400" : "bg-gray-500"
                }`}
              />
              <span className="truncate font-mono text-xs text-[var(--text-secondary)]">
                {claw.name}
              </span>
              <span className="ml-auto text-[10px] text-[var(--text-muted)]">
                {claw.isOnline ? t("online") : t("offline")}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}