<template>
  <RouterLink :to="action">
    <div class="list-item">
      <h2>{{ title }}</h2>
      <img v-bind:src="thumbnail"/>
    </div>
  </RouterLink>
</template>

<script>
export default {
  name: 'ListItem',
  props: [
    'title',
    'thumbnail',
    'action'
  ]
}
</script>

<style scoped>
.list-item {
  padding: 8px;
}

a {
  text-decoration: none;
}
</style>
