<script setup lang="ts">
import type { SiteOptionsFragment } from "#graphql-operations";

defineProps<{ profiles: SiteOptionsFragment["profiles"] }>();

const socialIconMap = {
  "facebook.com": "i-cib-facebook-f",
  "twitter.com": "i-cib-twitter",
  "x.com": "i-cib-twitter",
  "instagram.com": "i-cib-instagram",
  "youtube.com": "i-cib-youtube",
  "linkedin.com": "i-cib-linkedin",
  "tiktok.com": "i-cib-tiktok",
};

function getIconFromUrl(url: string): string {
  try {
    const domain = new URL(url).hostname.toLowerCase().replace(/^www\./, "");
    return socialIconMap[domain as keyof typeof socialIconMap] || "i-lucide-globe";
  }
  catch {
    return "i-lucide-globe";
  }
}
</script>

<template>
  <div class="flex gap-1">
    <UButton
      v-for="(profile, key) in profiles" :key="key"
      :icon="getIconFromUrl(profile!.url)"
      :to="profile!.url"
      variant="link"
      color="neutral"
      external
      target="_blank"
    />
  </div>
</template>
