<script setup lang="ts">
import IconCloud from 'vue-icon-cloud'

defineProps<{
  src: string
  alt: string
}>()

const techSlugs = [
  'javascript',
  'typescript',
  'vuedotjs',
  'nuxt',
  'tailwindcss',
  'html5',
  'css',
  'nodedotjs',
  'go',
  'docker',
  'git',
  'github',
  'nginx',
  'postgresql',
  'linux',
  'cloudflare',
]

const cloudImages = techSlugs.map(slug => `https://cdn.simpleicons.org/${slug}/${slug}`)
</script>

<template>
  <div class="avatar-cloud">
    <IconCloud :images="cloudImages" />

    <div class="avatar-core">
      <img
        :src="src"
        :alt="alt"
        class="avatar-image"
      />
    </div>
  </div>
</template>

<style scoped>
.avatar-cloud {
  --cloud-size: clamp(12rem, 31vw, 14rem);
  --avatar-size: clamp(6.4rem, 19vw, 7.35rem);

  position: relative;
  display: grid;
  place-items: center;
  width: var(--cloud-size);
  height: var(--cloud-size);
  flex-shrink: 0;
}

.avatar-cloud::before {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 9999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 64%);
  opacity: 0.8;
}

.avatar-cloud :deep(canvas) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12));
}

.avatar-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  pointer-events: none;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: 9999px;
  object-fit: cover;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

.dark .avatar-image {
  border-color: color-mix(in srgb, var(--color-text) 14%, transparent);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}
</style>
