---
import { getTrackByID } from "@lib/utils";
import { Icon } from "astro-icon/components";

interface Props {
  id: string;
  class?: string;
}

const { id, class: className, ...attrs } = Astro.props as Props;

const track = getTrackByID(id);

if (!track) {
  throw new Error(`Track with ID "${id}" not found.`);
}

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

<div
  class:list={[
    "text-primary flex items-center transition hover:cursor-pointer hover:text-gray-300",
    className
  ]}
  onclick=`window.player.addToQueue({ src: "${track.data.src}", "metadata": ${JSON.stringify(track.data.metadata)}, "duration": "${duration}" }, true);`
  {...attrs}
>
  <Icon name="fa7-solid:play-circle" class="mr-2 inline-block" />
  <span class="inline-block">{track.data.metadata.title}</span>
</div>