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

export type DotProps = Pick<HTMLAttributes<HTMLDivElement>, 'children'> & {
  avatarSize?: AvatarViewProps['size'];
  variant?: 'notification' | 'online';
};

/**
 * Depending on avatar size, 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 Dot({ children, avatarSize = 48, variant = 'notification' }: DotProps) {
  return (
    <div
      className="np-dot"
      style={{
        // @ts-expect-error CSS custom props allowed
        '--np-dot-size': `${MAP_STYLE_CONFIG[avatarSize].size}px`,
        '--np-dot-offset': `${MAP_STYLE_CONFIG[avatarSize].offset}px`,
      }}
    >
      <div
        className={clsx('np-dot-badge', {
          'np-dot-badge-notification': variant === 'notification',
          'np-dot-badge-online': variant === 'online',
        })}
      />
      <div className="np-dot-mask">{children}</div>
    </div>
  );
}