"use client";

import { RotateCw, ZoomIn, ZoomOut } from "lucide-react";
import { useTranslations } from "next-intl";

interface GlobeControlsProps {
  onResetView: () => void;
  onZoomIn: () => void;
  onZoomOut: () => void;
}

export function GlobeControls({ onResetView, onZoomIn, onZoomOut }: GlobeControlsProps) {
  const t = useTranslations("globeControls");
  return (
    <div className="absolute bottom-4 right-4 z-10 flex flex-col gap-2">
      <button
        onClick={onZoomIn}
        className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-[var(--bg-card)]/80 text-[var(--text-secondary)] backdrop-blur-sm transition-all hover:border-[var(--accent-cyan)]/30 hover:text-[var(--accent-cyan)]"
        aria-label={t("zoomIn")}
      >
        <ZoomIn className="h-4 w-4" />
      </button>
      <button
        onClick={onZoomOut}
        className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-[var(--bg-card)]/80 text-[var(--text-secondary)] backdrop-blur-sm transition-all hover:border-[var(--accent-cyan)]/30 hover:text-[var(--accent-cyan)]"
        aria-label={t("zoomOut")}
      >
        <ZoomOut className="h-4 w-4" />
      </button>
      <button
        onClick={onResetView}
        className="flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-[var(--bg-card)]/80 text-[var(--text-secondary)] backdrop-blur-sm transition-all hover:border-[var(--accent-cyan)]/30 hover:text-[var(--accent-cyan)]"
        aria-label={t("resetView")}
      >
        <RotateCw className="h-4 w-4" />
      </button>
    </div>
  );
}