@props([
    'station'
])

@php
    switch($station->id) {
        case(1):
            $gradient = 'bg-grad-brand-radio';
            $logo = 'brand-radio';
            $height = 'sm:max-h-[100px] max-h-[50px]';
        break;
        case(2):
            $gradient = 'bg-grad-brand-praise';
            $logo = 'brand-praise';
            $height = 'sm:max-h-[130px] max-h-[65px]';
        break;
        case(3):
            $gradient = 'bg-grad-brand-gospel';
            $logo = 'brand-gospel';
            $height = 'sm:max-h-[130px] max-h-[65px]';
        break;
        case(4):
            $gradient = 'bg-grad-brand-teaching';
            $logo = 'brand-teaching';
            $height = 'sm:max-h-[130px] max-h-[65px]';
        break;
    }
@endphp

<div class="{{ $gradient }} relative">
    <div class="overflow-hidden">
        <div class="container-2 relative">
            <div class="absolute inset-0">
                @switch($station->id)
                    @case(1)
                        <x-icon name="header-radio-christian-bg" class="opacity-70 block md:hidden h-[170%] w-auto absolute top-0 bottom-0 left-[50%]  translate-y-[15%] translate-x-[-50%]" />
                        <x-icon name="header-radio-christian-bg" class="hidden md:block h-[170%] w-auto absolute top-0 bottom-0 left-0  translate-y-[-50%] translate-x-[-50%]" />
                        <x-icon name="header-radio-christian-bg" class="hidden md:block h-[170%] w-auto absolute top-0 bottom-0 right-0 translate-y-[10%] translate-x-[50%]" />
                        @break
                    @case(2)
                        <x-icon name="header-radio-praise-bg" class="opacity-70 block md:hidden h-[140%] w-auto absolute top-0 bottom-0 left-[50%] translate-x-[-50%]" />
                        <x-icon name="header-radio-praise-bg" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 left-0  translate-x-[-40%] lg:translate-x-[-30%] xl:translate-x-[-20%]" />
                        <x-icon name="header-radio-praise-bg" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 right-0 translate-x-[40%] lg:translate-x-[30%] xl:translate-x-[20%]" />
                        @break
                    @case(3)
                        <x-icon name="header-radio-gospel-bg" class="opacity-70 block md:hidden h-[170%] w-auto absolute top-0 bottom-0 left-[50%]  translate-y-[40%] translate-x-[-60%] sm:translate-x-[-50%]" />
                        <x-icon name="header-radio-gospel-bg" class="hidden md:block h-[130%] w-auto absolute top-0 bottom-0 left-0  translate-y-[40%] translate-x-[-40%]" />
                        <x-icon name="header-radio-gospel-bg" class="hidden md:block h-[130%] w-auto absolute top-0 bottom-0 right-0 translate-y-[40%] translate-x-[40%]" />
                        @break
                    @case(4)
                        <x-icon name="header-radio-teaching-bg-a" class="opacity-70 block md:hidden h-[140%] w-auto absolute top-0 bottom-0 left-[50%] translate-x-[-50%]" />
                        <x-icon name="header-radio-teaching-bg-a" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 left-0  translate-y-[-20%] translate-x-[-40%] lg:translate-x-[-30%] xl:translate-x-[-20%]" />
                        <x-icon name="header-radio-teaching-bg-b" class="hidden md:block h-[100%] w-auto absolute top-0 bottom-0 right-0 translate-y-[40%] translate-x-[40%] lg:translate-x-[30%] xl:translate-x-[20%]" />
                        @break
                @endswitch
            </div>

            <x-sections.header-top
                :is-contained="false"
                donate-btn="btn-purple"
                :donate="$station->donate_link"
            />

            <div class="container-1 flex flex-col items-center relative -mt-6 {{ $station->hasSchedule() ? 'min-h-[280px]' : 'min-h-[230px]' }}">
                <x-icon :name="$logo" class="text-white {{ $height }} mb-8" />
            </div>
        </div>
    </div>

    @if ($station->hasSchedule())
        <div
            x-data="{
                coverArtUrl: '',
                setCoverArt(event) { this.coverArtUrl = event.detail.image },
                updated: false,
            }"
            @headercoverart.window="setCoverArt"
            @recommendations-updated.window="updated = true"
            class="absolute bottom-0 left-[50%] aspect-square w-36 translate-y-3 translate-x-[-50%]"
        >
            <div class="inset-0 absolute bg-center bg-cover" :style="`background-image: url('${coverArtUrl}')`"></div>
        </div>
    @endif
</div>