import { Icon } from 'vant'
import { defineComponent, toRefs } from 'vue'
import CountIcon from './count.svg'
import FavoriteIcon from './favorite.svg'
import styles from './item.module.less'

export default defineComponent({
  name: 'AlbumFooter',
  props: {
    musicSheetCount: {
      type: Number,
      default: 0
    },
    albumFavoriteCount: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const { musicSheetCount, albumFavoriteCount } = toRefs(props)
    return () => {
      return (
        <footer class={styles.footer}>
          <div>
            <Icon class={styles.icon} name={CountIcon} />
            <span>{musicSheetCount.value}首</span>
          </div>
          <div>
            <Icon class={styles.icon} name={FavoriteIcon} />
            <span>{albumFavoriteCount.value}人收藏</span>
          </div>
        </footer>
      )
    }
  }
})
