import { useMemo } from "react";

import { Layers } from "lucide-react";
import { useTranslation } from "react-i18next";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import type { TileProvider } from "@/hooks/use-leaflet-heatmap";
import { useAppStore } from "@/store/use-app-store";

export function MapTilesPanel() {
  const { t } = useTranslation();
  const tileProvider = useAppStore(state => state.tileProvider);
  const setTileProvider = useAppStore(state => state.setTileProvider);
  const tileOptions = useMemo(
    () => [
      { value: "openstreetmap" as TileProvider, label: t("map.tiles.openstreetmap") },
      { value: "mapbox" as TileProvider, label: t("map.tiles.mapbox") },
    ],
    [t]
  );

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Layers className="h-5 w-5 text-primary" />
          {t("map.tiles.title")}
        </CardTitle>
        <CardDescription>{t("map.tiles.subtitle")}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex justify-between gap-2">
          {tileOptions.map(option => (
            <Button
              key={option.value}
              type="button"
              variant={tileProvider === option.value ? "default" : "secondary"}
              size="sm"
              onClick={() => setTileProvider(option.value)}
            >
              {option.label}
            </Button>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
