import React from "react";
import { components } from "react-select";
import { Badge } from "../Badge";

export const CustomGroupHeading = (props) => {
  return (
    <div className="ia-select-group-heading-container">
      <div className="ia-select-group-heading-left">
        {props?.data?.icon && (
          <div className="group-icon">{props.data.icon}</div>
        )}
        <components.GroupHeading {...props} />
      </div>
      {props.customBadgeLabel && (
        <Badge
          label={props.customBadgeLabel}
          variant="subtle"
          size="small"
          color={props.customBadgeColor}
        />
      )}
    </div>
  );
};
