<script lang="ts">
  import Marquee from "$lib/components/ui/Marquee.svelte";
  import { dateToYear } from "$lib/util/functions";
  import { LinkType, type Track } from "$lib/util/types";

  export let track: Track;
</script>

<div class="trackname">
  <div class="title w-full">
    <Marquee
      items={[
        {
          id: track.album.id,
          itemId: track.id,
          title: track.name,
          linkType: LinkType.Album,
        },
      ]}
    />
  </div>
  <div class="s1 w-full text-sm text-base-content text-opacity-60">
    <Marquee
      items={track.artists.map((a) => {
        return { id: a.id, title: a.name, linkType: LinkType.Artist };
      })}
    />
  </div>
  <div class="s2 w-full text-sm text-base-content text-opacity-60">
    <Marquee
      items={[
        {
          id: track.album.id,
          title: track.album.name,
          linkType: LinkType.Album,
        },
      ]}
      suffix={track.album.releaseDate
        ? "\u00a0•\u00a0" + dateToYear(track.album.releaseDate)
        : undefined}
    />
  </div>
</div>

<style lang="postcss">
  .trackname {
    display: grid;
    grid-template: "title title" "s1 s1" "s2 s2" / auto 1fr;

    align-items: center;
    column-gap: 8px;
  }

  .title {
    grid-area: title;
  }

  .s1 {
    grid-area: s1;
    justify-self: start;
    min-width: 0;
  }

  .s2 {
    grid-area: s2;
    justify-self: start;
    min-width: 0;
  }
</style>
