﻿<template>
  <div class="w-full">
    <div
        :style="{ 
    backgroundColor: creator.colors.bannerBottom || '#A30E79',
    borderBottom: `2px solid ${creator.colors.accent || '#000000'}` 
  }">
      <div>
        <!--        Logo-Name-Followers-->
        <div class="flex flex-row relative z-20">
          <div>
            <!-- bug space-->
<!--            <img-->
<!--                -->
<!--                class="rounded-full border-solid border-2 -mt-4  max-w-[80px] h-auto ml-2"-->
<!--                :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
<!--                alt="Profile Picture"-->
<!--                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"-->
<!--            />-->
          </div>

          <div class="flex flex-column text-white capitalize px-2 mt-1">
            <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
            <div>{{ creator.subscriberCount }} {{ $t('banner.subscription')}}</div>
          </div>

          <div class="flex ml-auto text-right text-white text-lg px-3 mt-2">
            <div class="mt-1">{{ creator.about.title }}</div>
            <creator-about :creator="creator"></creator-about>
          </div>

        </div>

        <!--        Title-info-donation-->
        <div class="flex flex-row items-center justify-between w-full px-4">

          <div>
            <subscribe-button :creator="creator"></subscribe-button>
          </div>

          <div class="flex ml-auto space-x-4">
            <publish-content-button :creator="creator"
                                    @content-posted="addContent"
            ></publish-content-button>

            <donation-button :color-border="creator.colors.menu"
                             :color-accent="creator.colors.accent"
                             :creator-id="creator.id"
                             :creator-name="creator.name"
                             :creator-logo="creator.images.logo"
                             iconColorClass="text-white"
            ></donation-button>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>


<script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";

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

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

function addContent(content) {
  emits('content-posted', content);
}
</script>
