﻿<template>
  <div class="w-full">
    <div class="rounded-b-2xl"
         :style="{ backgroundColor: brandingStore.value.colors.bannerBottom }">
      <div>

        <!-- Logo-Name-Followers -->
        <div class="flex flex-row relative z-20">
          <div>
            <img
                class="absolute rounded-full border-solid border-2  max-w-[140px] h-auto ml-3 -mt-3"
                :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
                alt="Profile Picture"
                :style="{ borderColor: brandingStore.value.colors.accent, height: '150px'}"
            />
          </div>

          <div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40">
            <div class="flex justify-between">
              <div>
                <p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
                <p class="capitalize text-xl mt-1">{{ brandingStore.value.title }}</p>
                <div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
                
              </div>
              
            </div>

            <div class="flex justify-between mt-2">
              <subscribe-button></subscribe-button>
              <div class="flex space-x-2">
                <donation-button iconColorClass="text-white"
                ></donation-button>
              </div>
            </div>
          </div>
        </div>  
      </div>
    </div>
  </div>
</template>



<script setup>
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButton from "@/views/creators/DonationButton.vue";
import {useBrandingStore} from "@/stores/brandingStore.js";

const brandingStore = useBrandingStore()

</script>
