import React from "react";

import { ReactComponent as MinusExtrabold } from "../../../resources/toggles/minus-extrabold.svg";
import { ReactComponent as CheckmarkExtrabold } from "../../../resources/toggles/checkmark-extrabold.svg";
import { checkboxIconStyles } from "./CheckboxIcon.styles";

export interface CheckboxIconProps {
  indeterminate: boolean;
}

export const CheckboxIcon = ({ indeterminate }: CheckboxIconProps) => (
  <div className={checkboxIconStyles}>
    {indeterminate ? (
      <MinusExtrabold className="h-[10px] w-[10px]" />
    ) : (
      <CheckmarkExtrabold className="h-[10px] w-[10px]" />
    )}
  </div>
);
