"use client";

import { Map, Moon, Satellite, TreePine } from "lucide-react";
import { Button } from "@/shared/components/ui/button";
import { cn } from "@/shared/lib/utils";
import type { BasemapId } from "../types";

const BASEMAPS: { id: BasemapId; label: string; icon: typeof Map }[] = [
  { id: "liberty", label: "Harta", icon: Map },
  { id: "dark", label: "Dark", icon: Moon },
  { id: "google", label: "Satelit", icon: Satellite },
  { id: "satellite", label: "ESRI", icon: Satellite },
  { id: "orto", label: "ANCPI", icon: TreePine },
];

type BasemapSwitcherProps = {
  value: BasemapId;
  onChange: (id: BasemapId) => void;
};

export function BasemapSwitcher({ value, onChange }: BasemapSwitcherProps) {
  return (
    <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg flex p-0.5 gap-0.5">
      {BASEMAPS.map((b) => {
        const Icon = b.icon;
        const active = value === b.id;
        return (
          <Button
            key={b.id}
            variant="ghost"
            size="sm"
            className={cn(
              "px-2 py-1 h-7 text-xs gap-1 rounded-md",
              active && "bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground"
            )}
            onClick={() => onChange(b.id)}
            title={b.label}
          >
            <Icon className="h-3.5 w-3.5" />
            <span className="hidden sm:inline">{b.label}</span>
          </Button>
        );
      })}
    </div>
  );
}