<template>
  <div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
    <img
      class="
        bg-primaryDark bg-primaryLight
        rounded-full
        object-cover object-center
        h-5
        transition
        w-5
        absolute
      "
      :src="url"
      :alt="alt"
      loading="lazy"
    />
    <div class="rounded shadow-inner inset-0 absolute"></div>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default: `https://avatars.dicebear.com/v2/avataaars/${Math.random()
        .toString(36)
        .substring(7)}.svg?mood[]=happy`,
    },
    alt: {
      type: String,
      default: "Profile picture",
    },
  },
}
</script>
