import { clsx } from 'clsx';
import { useMemo } from 'react';
import { jsx } from 'react/jsx-runtime';
import { getBrandColorFromSeed } from '../common/colors.mjs';
import { Theme } from '../common/theme.mjs';

const backwardsCompatibleSize = size => {
  switch (size) {
    case 'sm':
      return 24;
    case 'md':
      return 48;
    case 'lg':
      return 72;
    default:
      return size;
  }
};
const Avatar = ({
  backgroundColor = null,
  backgroundColorSeed = null,
  children = null,
  className,
  outlined = false,
  size: sizeFromProps = 48,
  theme = Theme.LIGHT,
  type = 'thumbnail',
  'aria-label': ariaLabel
}) => {
  const backgroundColorFromSeed = useMemo(() => !backgroundColor && backgroundColorSeed ? getBrandColorFromSeed(backgroundColorSeed) : undefined, [backgroundColor, backgroundColorSeed]);
  const size = backwardsCompatibleSize(sizeFromProps);
  return /*#__PURE__*/jsx("div", {
    className: clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
      'tw-avatar--outlined': outlined,
      'tw-avatar--branded': Boolean(backgroundColorFromSeed),
      'np-text-title-body': type === 'initials'
    }),
    "aria-label": ariaLabel,
    children: /*#__PURE__*/jsx("div", {
      className: "tw-avatar__content",
      style: {
        backgroundColor: backgroundColor || backgroundColorFromSeed
      },
      children: children
    })
  });
};

export { Avatar as default };
//# sourceMappingURL=Avatar.mjs.map
