"use client"

import { Button } from "@/app/_components/ui/button"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/app/_components/ui/tooltip"
import { AlertTriangle, BarChart2, Car, ChartScatter, Clock, Map, Shield, Users } from "lucide-react"
import { ITooltips } from "./tooltips"
import { IconBubble, IconChartBubble } from "@tabler/icons-react"


// Define the primary crime data controls
const crimeTooltips = [
    { id: "incidents" as ITooltips, icon: <AlertTriangle size={20} />, label: "All Incidents" },
    { id: "heatmap" as ITooltips, icon: <Map size={20} />, label: "Crime Heatmap" },
    { id: "units" as ITooltips, icon: <BarChart2 size={20} />, label: "Units" },
    { id: "patrol" as ITooltips, icon: <Car size={20} />, label: "Patrol Areas" },
    { id: "clusters" as ITooltips, icon: <IconChartBubble size={20} />, label: "Clusters" },
    { id: "timeline" as ITooltips, icon: <Clock size={20} />, label: "Time Analysis" },
]

interface CrimeTooltipsProps {
    activeControl?: string
    onControlChange?: (controlId: ITooltips) => void
}

export default function CrimeTooltips({ activeControl, onControlChange }: CrimeTooltipsProps) {
    return (
        <div className="z-10 bg-background rounded-md p-1 flex items-center space-x-1">
            <TooltipProvider>
                {crimeTooltips.map((control) => (
                    <Tooltip key={control.id}>
                        <TooltipTrigger asChild>
                            <Button
                                variant={activeControl === control.id ? "default" : "ghost"}
                                size="medium"
                                className={`h-8 w-8 rounded-md ${activeControl === control.id
                                    ? "bg-emerald-500 text-black hover:bg-emerald-500/90"
                                    : "text-white hover:bg-emerald-500/90 hover:text-background"
                                    }`}
                                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>
    )
}