import React from "react";
import { SVG } from "@local-logic/core/ui";
import { poiIcons } from "~/constants/pois";
import { useRootElement } from "../context";
import { IconProps } from "./types";

export const Icon: React.FC<IconProps> = ({ options }) => {
  const {
    options: { poi },
  } = useRootElement();

  return (
    <SVG
      SVGElement={poiIcons[poi]}
      fill={`var(${options?.color})`}
      height={options?.height}
      width={options?.width}
    />
  );
};

Icon.defaultProps = {
  options: {
    color: "--ll-color-on-background-variant1",
  },
};