import { twJoin } from "tailwind-merge";
import React from "react";
import {
  Badge as MUIBadge,
  type BadgeProps as MUIBadgeProps,
} from "@mui/material";

export interface BadgeProps extends Omit<MUIBadgeProps, "className"> {
  disabled?: boolean;
  ESCAPE_className?: string;
}

export const Badge = ({
  children,
  badgeContent,
  disabled = false,
  ESCAPE_className,
  ...restProps
}: BadgeProps) => (
  <MUIBadge
    classes={{
      root: ESCAPE_className,
      badge: twJoin(
        "min-w-16 text-style-M75 min-w-[unset] px-0 pt-[0.5px] pl-[0.5px] text-N0 outline outline-2 outline-N0",
        disabled ? "bg-N60" : "bg-B400",
        !badgeContent ? "top-2 right-2 h-8 w-8" : "top-4 right-4 h-16 w-16"
      ),
    }}
    badgeContent={badgeContent}
    overlap="rectangular"
    {...restProps}
  >
    {children}
  </MUIBadge>
);
