<script lang="ts">
  import { goto } from '$app/navigation';
  import type { Playlist } from '$lib/api/types';
  import { user } from '$lib/auth/store.svelte';

  let { playlist }: { playlist: Playlist } = $props();

  const isOwn = $derived(user.value?.id === playlist.user_id);
</script>

<button
  type="button"
  onclick={() => goto(`/playlists/${playlist.id}`)}
  class="group flex w-full flex-col items-start gap-2 rounded-md p-2 text-left hover:bg-surface-hover"
>
  <div class="aspect-square w-full overflow-hidden rounded-md bg-surface-hover">
    {#if playlist.cover_url}
      <img
        src={playlist.cover_url}
        alt=""
        class="h-full w-full object-cover transition-transform group-hover:scale-105"
      />
    {:else}
      <div class="flex h-full w-full items-center justify-center text-text-muted">
        <span class="text-xs">No tracks yet</span>
      </div>
    {/if}
  </div>
  <div class="w-full min-w-0">
    <div class="truncate text-sm font-medium text-text-primary">{playlist.name}</div>
    <div class="truncate text-xs text-text-muted">
      {playlist.track_count} {playlist.track_count === 1 ? 'track' : 'tracks'}
      {#if !isOwn}
        · by {playlist.owner_username}
      {/if}
    </div>
  </div>
</button>
