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

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

export interface RequiredIndicatorProps {
  hasLabel: boolean;
}
export const dotStyles =
  "absolute bg-N20 shadow-S100 rounded-full w-16 h-16 flex items-center justify-center -right-[7.5px]";

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>
);
