﻿<template>
  <!--  Bannière-->
  <div>    
      <div class="relative z-20 -mt-2 md:mt-2">
        <div>
          <!-- Social Network UpperPart-->
          <div class="py-4 px-4 min-h-14 md:rounded-t-none md:rounded-t-2xl"
               :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">

            <div class="w-full flex justify-end gap-14 ">
              <a
                  v-for="socialNetwork in GetSocialsUrls()"
                  :href="socialNetwork.url"
                  target="_blank"
                  class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
                <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
                <img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9"
                     alt="Tiktok">
                <img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9"
                     alt="Website">
              </a>
            </div>
          </div>
        </div>

        <!--Banner -->
        <div class="relative">
          <!--Banner-->
          <div>
            <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.35)]"
                 :src="creator.images.banner"
                 alt="Profile Banner" style="max-height: 425px">
          </div>
        </div>
      </div>

    <!--actions - Lowerpart-->
    <banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
    
    
    
    </div>
  
</template>

<script setup>
import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue";

const props = defineProps({
  creator: {type: Object, required: true},
});

const emits = defineEmits(['content-posted'])

function addContent(content) {
  emits('content-posted', content)
}

function GetSocialsUrls() {

  const socials = [];

  if (props.creator.socials.facebookUrl !== null) {
    socials.push({
      icon: "mdi-facebook",
      url: props.creator.socials.facebookUrl
    })
  }
  if (props.creator.socials.instagramUrl !== null) {
    socials.push({
      icon: "mdi-instagram",
      url: props.creator.socials.instagramUrl
    })
  }
  if (props.creator.socials.xUrl !== null) {
    socials.push({
      icon: "mdi-twitter",
      url: props.creator.socials.xUrl
    })
  }
  if (props.creator.socials.linkedInUrl !== null) {
    socials.push({
      icon: 'mdi-linkedin',
      url: props.creator.socials.linkedInUrl
    })
  }
  if (props.creator.socials.tikTokUrl !== null) {
    socials.push({
      icon: '/images/socials/tiktok-white.png',
      url: props.creator.socials.tikTokUrl
    })
  }
  if (props.creator.socials.youtubeUrl !== null) {
    socials.push({
      icon: 'mdi-youtube',
      url: props.creator.socials.youtubeUrl
    })
  }
  if (props.creator.socials.redditUrl !== null) {
    socials.push({
      icon: 'mdi-reddit',
      url: props.creator.socials.redditUrl
    })
  }
  if (props.creator.socials.websiteUrl !== null) {
    socials.push({
      icon: 'mdi-web',
      url: props.creator.socials.websiteUrl
    })
  }

  return socials;
}

</script>