<script lang="ts">
  import GenericGenreBrowser from "$lib/components/library/GenericGenreBrowser.svelte";

  /**
   * Music album genre browser
   * @req: UR-007 - Navigate media in library
   * @req: UR-030 - Quick genre browsing and filtering
   * @req: DR-007 - Library browsing screens
   */

  const config = {
    itemTypes: ["MusicAlbum" as const],
    title: "Genres",
    backPath: "/library/music",
    genreIcon:
      "M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z",
    itemDisplayMode: "square" as const,
    searchPlaceholder: "Search genres...",
    noItemsMessage: "No albums found in this genre",
  };
</script>

<GenericGenreBrowser {config} />
