﻿<template> 
  <div class="shadow-lg rounded-2xl" :style="{ backgroundColor: creator.colors.bannerBottom}">
    <div class="relative z-20">
      <div class="py-4 min-h-9 md:rounded-t-2xl"
           :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
      </div>
      <div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"> ></div>

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

    </div>
    <div class="h-1" :style="{ backgroundColor: creator.colors.accent || '#6B0065' }"></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)
}


</script>