import { HTMLAttributes } from 'react';
import { Props as AvatarViewProps } from './AvatarView';

type Props = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
  avatarSize?: AvatarViewProps['size'];
};

/**
 * Depending on avatar size, notifcation dot size and offset are different
 */
const MAP_STYLE_CONFIG = {
  16: { size: 6, offset: 1 },
  24: { size: 8, offset: 2 },
  32: { size: 10, offset: 2 },
  40: { size: 10, offset: 2 },
  48: { size: 14, offset: 2 },
  56: { size: 16, offset: 3 },
  72: { size: 20, offset: 3 },
};

export default function NotificationDot({ children, avatarSize = 48 }: Props) {
  return (
    <div
      className="np-notification-dot"
      style={{
        // @ts-expect-error CSS custom props allowed
        '--np-notification-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
        '--np-notification-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,
      }}
    >
      <div className="np-notification-dot-badge" />
      <div className="np-notification-dot-mask">{children}</div>
    </div>
  );
}
