"use client"
import { Button } from "@/app/_components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/app/_components/ui/tooltip"
import {
    Thermometer,
    Droplets,
    Wind,
    Cloud,
    Eye,
    Clock,
    AlertTriangle,
    MapIcon,
    BarChart3,
    Users,
    Siren,
} from "lucide-react"
import { Overlay } from "../overlay"
import { ControlPosition } from "mapbox-gl"

interface MapControlsProps {
    onControlChange: (control: string) => void
    activeControl: string
    position?: ControlPosition
}

export default function MapControls({ onControlChange, activeControl, position = "top-left" }: MapControlsProps) {
    const controls = [
        { id: "crime-rate", icon: <Thermometer size={20} />, label: "Crime Rate" },
        { id: "theft", icon: <Droplets size={20} />, label: "Theft" },
        { id: "violence", icon: <Wind size={20} />, label: "Violence" },
        { id: "vandalism", icon: <Cloud size={20} />, label: "Vandalism" },
        { id: "traffic", icon: <Eye size={20} />, label: "Traffic" },
        { id: "time", icon: <Clock size={20} />, label: "Time Analysis" },
        { id: "alerts", icon: <AlertTriangle size={20} className="text-amber-500" />, label: "Alerts" },
        { id: "districts", icon: <MapIcon size={20} />, label: "Districts" },
        { id: "statistics", icon: <BarChart3 size={20} />, label: "Statistics" },
        { id: "demographics", icon: <Users size={20} />, label: "Demographics" },
        { id: "emergency", icon: <Siren size={20} />, label: "Emergency" },
    ]

    return (
        <Overlay position={position}>
        <div className="absolute top-0 left-0 z-10 bg-black/75 rounded-md m-2 p-1 flex items-center space-x-1">
            <TooltipProvider>
                {controls.map((control) => (
                    <Tooltip key={control.id}>
                        <TooltipTrigger asChild>
                            <Button
                                variant={activeControl === control.id ? "default" : "ghost"}
                                size="icon"
                                className={`h-8 w-8 rounded-md ${activeControl === control.id
                                    ? "bg-white text-black hover:bg-white/90"
                                    : "text-white hover:bg-white/10"
                                    }`}
                                onClick={() => onControlChange(control.id)}
                            >
                                {control.icon}
                                <span className="sr-only">{control.label}</span>
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent side="bottom">
                            <p>{control.label}</p>
                        </TooltipContent>
                    </Tooltip>
                ))}
            </TooltipProvider>
        </div>
        </Overlay>
    )
}