"use client";

import { cn } from "@/shared/lib/utils";

export type BasemapId = "liberty" | "dark" | "satellite" | "google";

const OPTIONS: Array<{ id: BasemapId; label: string }> = [
  { id: "liberty", label: "Liberty" },
  { id: "dark", label: "Întunecat" },
  { id: "satellite", label: "Satelit" },
  { id: "google", label: "Google" },
];

interface Props {
  value: BasemapId;
  onChange: (id: BasemapId) => void;
}

export function BasemapSwitcher({ value, onChange }: Props) {
  return (
    <div className="rounded-md border bg-background/95 shadow-sm backdrop-blur">
      <div className="flex items-center gap-1 p-1">
        {OPTIONS.map((opt) => (
          <button
            key={opt.id}
            type="button"
            onClick={() => onChange(opt.id)}
            className={cn(
              "rounded px-2 py-1 text-xs font-medium transition-colors",
              value === opt.id
                ? "bg-primary text-primary-foreground"
                : "text-muted-foreground hover:bg-muted",
            )}
          >
            {opt.label}
          </button>
        ))}
      </div>
    </div>
  );
}
