<script>
    export let name;
    export let side = 48;
    const colors = [
        "#00AA55",
        "#009FD4",
        "#B381B3",
        "#939393",
        "#E3BC00",
        "#D47500",
        "#DC2A2A",
        "#3ede91",
        "#377dd4",
        "#0256b0",
        "#053d82",
        "#3d026e",
        "#b378e3",
        "#c4065c",
        "#543208",
        "#d97811",
        "#0c6b40",
    ];
    let initials = "";
    if (name.split(" ").length > 1) {
        initials =
            name.split(" ")[0].charAt(0).toUpperCase() +
            name.split(" ")[1].charAt(0).toUpperCase();
    } else {
        initials =
            name.split(" ")[0].charAt(0).toUpperCase() +
            name.split(" ")[0].charAt(1).toUpperCase();
    }

    let charIndex = name.charCodeAt(1) + name.length;
    let colorIndex = charIndex % 19;
</script>

<div
    class="avatar"
    title={name}
    style="background-color:{colors[
        colorIndex
    ]}; height: {side}px;width: {side}px; font-size:{side / 2}px"
>
    <div class="avatar__letters">{initials}</div>
</div>
