<template>
  <div class="fc-artist-gallery">
    <MasonryGrid
      :items="store.images"
      :loading="store.imagesLoading"
      :has-more="store.hasMoreImages"
      @load-more="store.loadMoreImages(props.slug)"
      @open="openImage"
    />
  </div>
</template>

<script setup>
import { useArtistStore } from '../../stores/artist.js'
import { useModalStore } from '../../stores/modal.js'
import MasonryGrid from '../discovery/MasonryGrid.vue'

const props = defineProps({
  slug: { type: String, required: true },
})

const store = useArtistStore()
const modal = useModalStore()

function openImage (id) {
  modal.open(id)
}
</script>

<style scoped>
.fc-artist-gallery { min-width: 0; }
</style>
