<template>
    <div class="card flex flex-row items-center">
        <div class="cover-art object-cover">
            <img :src="song.cover_art_url" :alt="song.album" height="64" width="64">
        </div>
        <div class="flex flex-col ml-4">
            <div class="font-bold">{{ song.title }}</div>
            <div class="font-md">{{ song.artist }}</div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from "vue"

export default defineComponent({
  emits: [],

  props: {
    song: Object,
  },

  components: {},

  setup(props, {emit}) {
    return {}
  },

  beforeMount() {},

  mounted() {},

  data() {
    return {}
  },

  computed: {},

  methods: {},
})
</script>

<style scoped>
.cover-art {
    height: 64px;
    width: 64px;
}
</style>
