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

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

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

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