"use client";

import { Badge } from "@/components/ui/badge";

interface LobsterTooltipProps {
  city: string;
  country: string;
  lobsterCount: number;
  weight: number;
}

export function LobsterTooltip({ city, country, lobsterCount, weight }: LobsterTooltipProps) {
  return (
    <div className="rounded-xl border border-white/10 bg-[var(--bg-card)]/95 p-3 shadow-xl backdrop-blur-sm">
      <div className="flex items-center gap-2">
        <span className="text-lg">🦞</span>
        <div>
          <p className="font-mono text-sm font-medium text-[var(--accent-cyan)]">{city}</p>
          <p className="text-xs text-[var(--text-muted)]">{country}</p>
        </div>
      </div>
      <div className="mt-2 flex items-center gap-2">
        <Badge variant="online">{lobsterCount} active</Badge>
        <Badge variant="secondary">weight: {weight.toFixed(1)}</Badge>
      </div>
    </div>
  );
}