import React, { ReactNode } from 'react';
import classNames from 'classnames';
import * as css from './styles.css';
import { Presence } from '../../hooks/useUserPresence';

type PresenceAvatarProps = {
  /** The presence state to display */
  presence?: Presence;
  /** The avatar element to wrap */
  children: ReactNode;
  /** Additional className */
  className?: string;
};

/**
 * Wraps an avatar with a left-side presence indicator border.
 * Shows green for online, yellow/orange for unavailable/away, grey for offline.
 */
export function PresenceAvatar({ presence, children, className }: PresenceAvatarProps) {
  if (!presence) {
    return <>{children}</>;
  }

  return (
    <div
      className={classNames(css.PresenceAvatarContainer, css.PresenceIndicator, className, {
        [css.PresenceOnline]: presence === Presence.Online,
        [css.PresenceUnavailable]: presence === Presence.Unavailable,
        [css.PresenceOffline]: presence === Presence.Offline,
      })}
    >
      {children}
    </div>
  );
}