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

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

/**
 * @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;
} & CommonProps;

const mapLegacySize = {
  [String(Size.SMALL)]: 16,
  // medium is deprecated, so we map it to small
  [String(Size.MEDIUM)]: 16,
  [String(Size.LARGE)]: 24,
} satisfies Record<string, CircleProps['size']>;

const Badge = ({
  badge,
  className = undefined,
  size: sizeProp = Size.SMALL,
  border = Theme.LIGHT,
  'aria-label': ariaLabel,
  children,
}: 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}>
      <div className="tw-badge__children">{children}</div>
      <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
        {badge}
      </Circle>
    </div>
  );
};

export default Badge;
