<script>
  import LL from "$i18n/i18n-svelte";
  import {
    mdiAccountMusic,
    mdiAccountMusicOutline,
    mdiAlbum,
    mdiHome,
    mdiHomeOutline,
    mdiPlaylistMusic,
    mdiPlaylistMusicOutline,
  } from "@mdi/js";

  import { iconAlbumOutline, iconSearch, iconSearchFilled } from "$lib/util/icons";

  import NavbarMobileItem from "./NavbarMobileItem.svelte";
</script>

<div class="btm-nav btm-nav-sm text-xs bg-base-300 z-50">
  <NavbarMobileItem
    title={$LL.home()}
    icon={mdiHomeOutline}
    iconActive={mdiHome}
    href="/"
  />
  <NavbarMobileItem
    title={$LL.search()}
    icon={iconSearch}
    iconActive={iconSearchFilled}
    href="/search"
  />
  <NavbarMobileItem
    title={$LL.artists()}
    icon={mdiAccountMusicOutline}
    iconActive={mdiAccountMusic}
    href="/artist"
  />
  <NavbarMobileItem
    title={$LL.albums()}
    icon={iconAlbumOutline}
    iconActive={mdiAlbum}
    href="/album"
  />
  <NavbarMobileItem
    title={$LL.playlists()}
    icon={mdiPlaylistMusicOutline}
    iconActive={mdiPlaylistMusic}
    href="/playlist"
  />
</div>
