// imports
import clsx from 'clsx';
import React from 'react';
import initials from 'initials';

// locals
import Tooltip from '../Tooltip';

/**
 * component team avatar
 */
const ComponentTeamAvatar = (props = {}) => {
  // member
  const { member } = props;

  // user or agent
  const subject = member?.user || member?.agent;

  // return jsx
  return (
    <Tooltip placement="bottom" title={subject?.name || subject?.email}>
      <button
        className={clsx(
          'avatar',
          props.className,
        )}
      >
        <span className="text-sm truncate">
          {initials(subject?.name || subject?.email)}
        </span>
      </button>
    </Tooltip>
  );
};

/**
 * component team avatar
 */
export default ComponentTeamAvatar;