import React from "react";

import { checkboxIconStyles } from "../checkbox/CheckboxIcon";
import { ReactComponent as DotExtrabold } from "../../../resources/toggles/dot.svg";
import { twMerge } from "../../../tailwind.config";

// Radio buttons are considered "indeterminate" when no radiobutton in the group is checked.
//   We don't want to apply the same styles as we do for checkboxes.
const radioButtonIconStyles = checkboxIconStyles
  .split(" ")
  .filter((cls) => !/peer-indeterminate:/.test(cls))
  .join(" ");

export const RadioButtonIcon = () => (
  <div className={twMerge(radioButtonIconStyles, "rounded-full")}>
    <DotExtrabold className="h-[10px] w-[10px]" />
  </div>
);
