"use client"

import { Card } from "@/app/_components/ui/card"
import { CRIME_COLORS, CRIME_RATES } from "@/app/_utils/const/crime"

type MapLegendProps = {
  title?: string
  position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
}

export default function MapLegend({ title = "Crime Rate Legend", position = "bottom-right" }: MapLegendProps) {
  // Define position classes
  const positionClasses = {
    "top-left": "top-4 left-4",
    "top-right": "top-4 right-4",
    "bottom-left": "bottom-4 left-4",
    "bottom-right": "bottom-4 right-4",
  }

  return (
    <div className={`absolute ${positionClasses[position]} z-10`}>
      <Card className="p-3 shadow-md bg-white/90 backdrop-blur-sm">
        <div className="text-sm font-medium mb-1">{title}</div>
        <div className="space-y-1">
          {Object.entries(CRIME_RATES).map(([key, label]) => (
            <div key={key} className="flex items-center gap-2">
              <div
                className="w-4 h-4 rounded-sm"
                style={{ backgroundColor: CRIME_COLORS[key as keyof typeof CRIME_COLORS] }}
              />
              <span className="text-xs">{label}</span>
            </div>
          ))}
        </div>
      </Card>
    </div>
  )
}