import { clsx } from 'clsx';
import { ReactNode } from 'react';

import {
  Size,
  Theme,
  SizeSmall,
  SizeMedium,
  SizeLarge,
  ThemeDark,
  ThemeLight,
  CommonProps,
} from '../common';

/**
 * @deprecated Use `SizeSmall` or `SizeLarge` instead.
 */
type DeprecatedSizes = SizeMedium;

export type BadgeProps = {
  badge: ReactNode;
  children: ReactNode;
  /**
   * `md` is deprecated, it will fallback to `sm` instead.
   */
  size?: SizeSmall | DeprecatedSizes | SizeLarge;
  border?: ThemeDark | ThemeLight;
  'aria-label'?: string;
  style?: React.CSSProperties;
} & CommonProps;

// Note: Badge component is not deprecated, we want stop it's direct usage on consumer side.
// Deprecation notice will hint consumers to migrate. Eventually the component will become internal.
/**
 * @deprecated Use `<AvatarView badge={..} />` instead.
 */
const Badge = ({
  badge,
  className = undefined,
  size: sizeProp = Size.SMALL,
  border = Theme.LIGHT,
  'aria-label': ariaLabel,
  children,
  style,
}: BadgeProps) => {
  // medium is deprecated, so we map it to small
  const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;
  const classes: string = clsx(
    'tw-badge',
    {
      [`tw-badge-border-${border}`]: border,
      [`tw-badge-${size}`]: size,
    },
    className,
  );

  return (
    <div aria-label={ariaLabel} className={classes} style={style}>
      <div className="tw-badge__children">{children}</div>
      <div className="tw-badge__content">{badge}</div>
    </div>
  );
};

export default Badge;
