<script>
    const {src, alt = "Profile image"} = $props();
    import jdenticon from "jdenticon/standalone";
</script>

<div class="rounded-avatar-wrapper">
    {#if src}
        <img class="rounded-avatar" {src} {alt} />
    {:else}
        {@const randomAvatar = jdenticon.toSvg(Navigator.userAgent, 320, { padding: 0 })}
        <div class="rounded-avatar">
            {@html randomAvatar}
        </div>
    {/if}
</div>

<style>
    .rounded-avatar-wrapper {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .rounded-avatar {
        overflow: hidden;
        border-radius: 100%;
        aspect-ratio: 1 / 1;
    }


</style>