// @flow
import * as React from 'react';
import { avatarColors } from '../../styles/variables';

const getInitials = name => {
    const firstInitial = name.slice(0, 1);
    const lastInitial = name.slice(name.lastIndexOf(' ') + 1, name.lastIndexOf(' ') + 2);
    return (firstInitial + lastInitial).toUpperCase();
};

type Props = {
    className?: string,
    id?: ?string | number,
    name: string,
};

const AvatarInitials = ({ className = '', id, name }: Props) => {
    const avatarColorSelector = parseInt(id, 10) || 0;
    const backgroundColorIndex = avatarColorSelector % avatarColors.length;

    return (
        <span className={`avatar-initials ${className}`} data-bg-idx={backgroundColorIndex}>
            {getInitials(name)}
        </span>
    );
};

export default AvatarInitials;