import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"

import { getCategoryIconName } from "../utils"
import { poiVariants } from "./variants"

import type { PoiMarkerProps } from "@/types/components/maps/poiMarker"

export default function PoiMarker({
  category,
  skipBackground,
  size = 16,
  className = "",
}: PoiMarkerProps) {
  const iconName = getCategoryIconName(category)
  const Icon = iconName ? getIconByIconName(iconName) : null
  const classNames = poiVariants({ category, skipBackground, className })

  return Icon ? (
    <span className={classNames}>
      <Icon
        color={skipBackground ? "grey80" : "white"}
        width={size}
        height={size}
      />
    </span>
  ) : null
}