import React from "react";
import { theme, Popover, Marker as M } from "@local-logic/core/ui";
import { poiIcons } from "~/constants/pois";
import { useRootElement } from "../context";

export const Marker = () => {
  const {
    options: { type, isOpen, isHovered, size, renderForPrint },
  } = useRootElement();

  return (
    <Popover.Trigger>
      <M
        size={size}
        SVGElement={poiIcons[type]}
        renderForPrint={renderForPrint}
        expandMarker={isOpen || isHovered}
        backgroundColor={theme["--ll-color-primary"]}
        backgroundColorHighlight={theme["--ll-color-primary-variant1"]}
      />
    </Popover.Trigger>
  );
};