import { computed } from 'vue'

import fallbackImage from '../assets/fallback.svg';

export const Header = ({ hover, image = fallbackImage }: {
  image?: string,
  hover?: string,
}) => {
  const emit = vineEmits([ 'click' ])
  const style = computed(() => ({ '--backdrop-image': `url('${image}')` }))

  return vine`
    <div class="header" :style="style">
      <div class="backdrop" />
      <img
        class="album-cover"
        :src="image"
        :title="hover"
        @click="$emit('click')"
      >
      <div class="details">
        <slot />
      </div>
    </div>
  `
}