<script lang="ts">
  import GenericMediaListPage from "$lib/components/library/GenericMediaListPage.svelte";
  import type { MediaItem } from "$lib/api/types";

  /**
   * Artist browser
   * @req: UR-007 - Navigate media in library
   * @req: UR-008 - Search media across libraries
   * @req: DR-007 - Library browsing screens
   */

  const config = {
    itemType: "MusicArtist",
    title: "Artists",
    backPath: "/library/music",
    searchPlaceholder: "Search artists...",
    sortOptions: [
      {
        key: "name",
        label: "A-Z",
        compareFn: (a: MediaItem, b: MediaItem) => a.name.localeCompare(b.name),
      },
      {
        key: "recent",
        label: "Recent",
        compareFn: (a: MediaItem, b: MediaItem) => {
          const aDate = a.userData?.lastPlayedDate || "";
          const bDate = b.userData?.lastPlayedDate || "";
          return bDate.localeCompare(aDate);
        },
      },
    ],
    defaultSort: "name",
    displayComponent: "grid" as const,
    searchFields: ["name"],
  };
</script>

<GenericMediaListPage {config} />
