---
import { Image } from 'astro:assets'
import * as m from '../paraglide/messages.js'

import discord from 'img/socials/discord.png'
import kofi from 'img/socials/ko-fi-donate-button.png'
import yt from 'img/socials/yt.png'
import twitter from 'img/socials/twitter.png'

import SidebarSection from './sidebar/SidebarSection.astro'
import Highlight from './sidebar/Highlight.astro'
import AlbumBox from './AlbumBox.astro'
import AlbumCount from './sidebar/AlbumCount.astro'
import CommentCarousel from './sidebar/CommentCarousel.astro'
import SidebarAd from './sidebar/SidebarAd.astro'
import GetLuckyAlbum from './sidebar/GetLuckyAlbum.astro'

const listClass =
  'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
---

<div class='md:w-3/12 md:max-w-[300px] h-full bg-dark flex flex-col'>
  <GetLuckyAlbum server:defer class={listClass}>
    <div slot='fallback' class:list={[listClass, 'animate-pulse w-full h-14 bg-gray/90']}></div>
  </GetLuckyAlbum>
  <a href='/holy12' class={listClass}>{m.randomPull()}</a>
  <div class='px-6 flex flex-col gap-y-3'>
    <SidebarSection class='flex flex-col gap-y-3'>
      <div class='flex gap-x-2 justify-center'>
        <a href='https://www.youtube.com/channel/UCb1Q0GuOa8p_7fY-pYnWCmQ' target='_blank' rel='noopener noreferrer'>
          <Image class='rounded-md' src={yt} alt='youtube' />
        </a>

        <a href='https://twitter.com/SittingOnCloud' target='_blank' rel='noopener noreferrer'>
          <Image class='rounded-md' src={twitter} alt='twitter' />
        </a>
      </div>
      <div>
        <a href='https://discord.gg/x23SFbE' target='_blank' rel='noopener noreferrer'>
          <Image class='rounded-md' src={discord} alt='Join our Discord!' />
        </a>
      </div>
      <div>
        <a href='https://ko-fi.com/sittingonclouds' target='_blank' rel='noopener noreferrer'>
          <Image class='rounded-md' src={kofi} alt='Support me on Ko-fi' />
        </a>
      </div>
    </SidebarSection>
    <Highlight server:defer>
      <SidebarSection slot='fallback'>
        <div class='uppercase text-center text-2xl/6 font-semibold'>{m.highlightAlbum()}</div>
        <AlbumBox loading />
      </SidebarSection>
    </Highlight>
    <CommentCarousel>
      <SidebarSection slot='fallback' class='h-24 animate-pulse' />
    </CommentCarousel>
    <AlbumCount server:defer>
      <SidebarSection slot='fallback' class='h-32 animate-pulse' />
    </AlbumCount>

    <SidebarSection class='p-0.5'>
      <iframe title='radio' src='https://radio.sittingonclouds.net/widget' class='h-[400px] w-full rounded-md'></iframe>
    </SidebarSection>

    <SidebarAd />
  </div>
</div>