import { twJoin } from "tailwind-merge";

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

export interface RequiredIndicatorProps {
  hasLabel?: boolean;
}

export const RequiredIndicator = ({
  hasLabel = false,
}: RequiredIndicatorProps) => (
  <div
    className={twJoin(
      dotStyles,
      hasLabel ? "top-10" : "top-0 -translate-y-1/2"
    )}
  >
    <Icon
      color="main"
      ESCAPE_className="w-10 h-10"
      name="asterisk-star"
      weight="bold"
    />
  </div>
);
