import { IconByIconName } from "@scandic-hotels/design-system/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 = "small",
  className = "",
}: PoiMarkerProps) {
  const iconName = getIconByPoiGroupAndCategory(group, categoryName)
  const classNames = poiVariants({ group, skipBackground, size, className })

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