import { twJoin } from "tailwind-merge";
import React from "react";

import { Icon } from "../icon/Icon";
import { dotStyles } from "./dotStyles";

export interface RequiredIndicatorProps {
  hasLabel: boolean;
}

export const RequiredIndicator = ({ hasLabel }: RequiredIndicatorProps) => (
  <div className={twJoin(dotStyles, hasLabel ? "top-10" : "-top-[7.5px]")}>
    <Icon
      color="main"
      ESCAPE_className="w-10 h-10"
      name="asterisk-star"
      weight="bold"
    />
  </div>
);
