import { AlertCircle, AlertTriangle, PackageX, ShieldAlert, Siren } from "lucide-react"
import { CRIME_RATE_COLORS } from "@/app/_utils/const/map"

export function MapLegend() {
  return (
    <div className="absolute bottom-20 right-2 bg-black/75 p-3 rounded-md z-10 text-white text-sm">
      <div className="font-medium mb-2">Crime Rates</div>
      <div className="space-y-1 mb-3">
        <div className="flex items-center gap-2">
          <span className="inline-block w-4 h-4 rounded-sm" style={{ backgroundColor: CRIME_RATE_COLORS.low }}></span>
          <span>Low</span>
        </div>
        <div className="flex items-center gap-2">
          <span
            className="inline-block w-4 h-4 rounded-sm"
            style={{ backgroundColor: CRIME_RATE_COLORS.medium }}
          ></span>
          <span>Medium</span>
        </div>
        <div className="flex items-center gap-2">
          <span className="inline-block w-4 h-4 rounded-sm" style={{ backgroundColor: CRIME_RATE_COLORS.high }}></span>
          <span>High</span>
        </div>
        <div className="flex items-center gap-2">
          <span
            className="inline-block w-4 h-4 rounded-sm"
            style={{ backgroundColor: CRIME_RATE_COLORS.critical }}
          ></span>
          <span>Critical</span>
        </div>
      </div>

      <div className="font-medium mb-2">Incident Types</div>
      <div className="space-y-1">
        <div className="flex items-center gap-2">
          <AlertCircle size={16} className="text-red-500" />
          <span>General</span>
        </div>
        <div className="flex items-center gap-2">
          <PackageX size={16} className="text-amber-500" />
          <span>Theft</span>
        </div>
        <div className="flex items-center gap-2">
          <Siren size={16} className="text-blue-500" />
          <span>Accident</span>
        </div>
        <div className="flex items-center gap-2">
          <ShieldAlert size={16} className="text-purple-500" />
          <span>Violence</span>
        </div>
        <div className="flex items-center gap-2">
          <AlertTriangle size={16} className="text-orange-500" />
          <span>Juvenile</span>
        </div>
      </div>
    </div>
  )
}