<script setup lang="ts">
import type { AcfSocialFragment } from "#graphql/types";

defineProps<{ social: AcfSocialFragment }>();

const socialIconNames = {
  "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 getSocialIcon(url: string): string {
  try {
    const domain = new URL(url).hostname.toLowerCase().replace(/^www\./, "");
    return socialIconNames[domain as keyof typeof socialIconNames] ?? "i-lucide-globe";
  } catch (error) {
    return "i-lucide-globe";
  }
}
</script>

<template>
  <ul v-if="social.profiles.length">
    <li v-for="({ url }, key) in social.profiles" :key="key">
      <a :href="url" target="_blank" rel="noopener noreferrer">
        <UIcon :name="getSocialIcon(url)" />
      </a>
    </li>
  </ul>
</template>
