<template>
  <div class="library-card">
    <h4>{{ props.name }}</h4>
    <DropDown>
      <template v-slot:trigger>
        <button><EllipsisVertical /></button>
      </template>
      <button @click="viewSongs">查看歌曲</button>
      <button @click="scanCard">扫描</button>
      <button type="reset" @click="deleteCard">删除</button>
    </DropDown>
  </div>
</template>

<script setup>
import { EllipsisVertical } from 'lucide-vue-next'
import PopupMenu from './PopupMenu.vue'
import DropDown from './DropDown.vue'
const props = defineProps({
  name: String,
  id: Number,
})
const emit = defineEmits(['delete', 'scan', 'viewSongs'])

const scanCard = () => {
  emit('scan', props.id)
}
const deleteCard = () => {
  emit('delete', props.id)
}
const viewSongs = () => {
  emit('viewSongs', props.id)
}
</script>

<style scoped>
.library-card {
  max-width: var(--size-fluid-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--stone-3);
  aspect-ratio: var(--ratio-square);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  padding: var(--size-6);
  margin: var(--size-3);
}
</style>
