---
import { type CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import Song from "@components/Song.astro";
import me from "@assets/me.webp";

interface Props {
  isPlaying?: boolean;
  posts?: CollectionEntry<"blog">[];
  nowPlaying: string;
  playPercent: number;
  playPositon: string;
  playLength: string;
  sectionClass?: string;
  author?: string;
}

const {
  isPlaying = false,
  posts,
  nowPlaying,
  playPercent,
  playPositon,
  playLength,
  sectionClass,
  author,
} = Astro.props as Props;
---

<section class={sectionClass}>
  <div class="relative w-[416px] h-[416px] mb-4">
    <Image
      id="player-image"
      src={me}
      alt="isabel roses"
      class="absolute inset-0 w-full h-full rounded-sm transition-opacity duration-500 ease-in-out opacity-100"
      width={416}
      height={416}
      loading="eager"
    />

    {
      posts && (
        <div
          id="queue-view"
          class="absolute inset-0 opacity-0 pointer-events-none transition-opacity duration-500 ease-in-out overflow-y-auto"
        >
          <ul class="flex flex-col p-2">
            {posts.entries().map(([i, post]) => (
              <Song
                index={i + 1}
                title={post.data.title}
                time={`${post.data.readTime} mins`}
                slug={`/blog/${post.id}`}
              />
            ))}
          </ul>
        </div>
      )
    }
  </div>

  <div class="flex flex-col gap-4">
    <div>
      <h1 id="now-playing-title" class="text-2xl font-bold mb-1">
        {nowPlaying}
      </h1>
      <p id="now-playing-author" class="mb-2">{ author ?? "isabel roses" }</p>
    </div>

    <div class="w-full">
      <div class="bg-card h-2 rounded-2xl">
        <div
          id="scrobbler"
          class=`relative bottom-1 left-[${playPercent}%] h-4 w-4 bg-fg-lighter rounded-2xl`
        >
        </div>
      </div>
      <div class="flex justify-between text-sm mt-1">
        <span id="playPositon" class="text-fg-lighter">{playPositon}</span>
        <span id="listenTime" class="text-fg-lighter">{playLength}</span>
      </div>
    </div>

    <div class="flex gap-4 mt-4 mx-8 items-center place-content-between">
      <a href="/" aria-label="home"
        ><Icon name="fa7-solid:house" class="h-6 w-6 mb-1 cursor-pointer" /></a
      >

      <div class="flex gap-4 items-center justify-center">
        <Icon
          id="back"
          name="fa7-solid:backward-step"
          class="h-8 w-8 cursor-pointer"
        />
        {
          isPlaying ? (
            <Icon
              id="play"
              name="fa7-solid:circle-pause"
              class="h-12 w-12 cursor-pointer"
            />
          ) : (
            <Icon
              id="play"
              name="fa7-solid:circle-play"
              class="h-12 w-12 cursor-pointer"
            />
          )
        }

        <Icon
          id="skip"
          name="fa7-solid:forward-step"
          class="h-8 w-8 cursor-pointer"
        />
      </div>

      <Icon
        id="queue"
        name="fa7-solid:bars-staggered"
        class="h-6 w-6 mb-1 cursor-pointer"
      />
    </div>
  </div>
</section>