import { IconByIconName } from "@/components/Icons/IconByIconName"

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

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

export default function PoiMarker({
  group,
  categoryName,
  skipBackground,
  size = 16,
  className = "",
}: PoiMarkerProps) {
  const iconName = getIconByPoiGroupAndCategory(group, categoryName)
  const classNames = poiVariants({ group, skipBackground, className })

  return iconName ? (
    <span className={classNames}>
      <IconByIconName
        iconName={iconName}
        color={skipBackground ? "Icon/Feedback/Neutral" : "Icon/Inverted"}
        size={size}
      />
    </span>
  ) : null
}
