---
import type { CollectionEntry } from "astro:content";

interface Props {
  track: CollectionEntry<"tracks">;
  index: number;
}

const { track, index } = Astro.props as Props;

import Image from "astro/components/Image.astro";

import { getAudioDurationInSeconds } from "get-audio-duration";
import { join } from "path";
const fullFilePath = join(process.cwd(), "public", track.data.src);
const duration = await getAudioDurationInSeconds(fullFilePath);

if (!track.data.card) {
  throw new Error(`Track with ID "${track.id}" is missing card data.`);
}
---

<div
  class:list={[
    "relative flex min-h-42 flex-auto hover:cursor-pointer",
    index < 2 ? "lg:w-1/2" : "sm:w-1/2 md:w-1/3 lg:w-1/4"
  ]}
  onclick=`window.player.addToQueue({ src: "${track.data.src}", "metadata": ${JSON.stringify(track.data.metadata)}, "duration": "${duration}" }, true);`
>
  <Image
    src={track.data.card.image.src}
    alt={track.data.card.image.alt}
    class="h-full w-full object-cover"
  />

  <div
    class="bg-primary absolute inset-0 z-10 flex h-full w-full flex-col items-center justify-center p-16 text-center opacity-0 transition duration-300 hover:opacity-90"
  >
    <span class="text-md md:text-l block font-bold text-gray-100"
      >{track.data.card.text.secondary}</span
    >
    <span class="block text-xl font-extrabold uppercase md:text-2xl"
      >{track.data.card.text.primary}</span
    >
  </div>
</div>
