<template>
  <div class="flex">
    <button class="default">
      <svg class="w-6 h-6">
        <use v-show="!listsMusic.playing" xlink:href="#play"></use>
        <use v-show="listsMusic.playing" xlink:href="#pause"></use>
      </svg>
    </button>
  </div>
  <div class="flex flex-1 text-sm text-gray-light">
    {{ listsMusic.name }}
  </div>
  <div ref="favplayer" class="text-sm text-gray-light">
    <span v-show="!listsMusic.playing">{{ listsMusic.time }}</span>
    <span v-show="listsMusic.playing">{{ seek }}</span>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
import { useIntersectionObserver } from '@/includes/composables'

export default {
    props: {
        listsMusic: Object,
        seek: String,
    },

    setup() {
        const containerRef = ref(null)
        const { isIntersecting } = useIntersectionObserver(
            containerRef,
            {},
            showDetail
        )
        const showDetail = (entry) => {
            //console.log(entry)
        }
        watch(isIntersecting, (isIntersecting) => {
            //console.log(isIntersecting)
        })
        return {
            favplayer: containerRef,
            showDetail,
        }
    },
}
</script>
