<template>
  <a class='post' :href='post.URL' target='_blank'>
    <v-row class='mb-5'>
      <v-col cols=12 lg=4>
        <v-img class='rounded-lg'   max-height="250" :src="post.image" alt=""></v-img>
      </v-col>
      <v-col cols=12 lg=8>
        <span>{{post.source.name}}</span>
        <h1 class='text-h5 font-weight-bold'>{{post.title}}</h1>
        <p class='font-weight-light'>{{new Date(post.date).toLocaleString('it-IT', { weekday: 'long', month: 'long', day: 'numeric'})}}</p>
      </v-col>
    </v-row>
  </a>
  <!-- <div class='post p-2 mb-10  bg-white'>
    <div role='title' class="block pt-2 mb-3 border-b-2" >
        <a target="_blank" :href='post.URL' v-html='post.title' class='text-xl font-bold text-violet-500'></a>
        <span class="font-base text-base float-right">{{new Date(post.date).toLocaleString()}} - <b><a :href='post.source.link'>{{post.source.name}} <img class="inline h-5 w-5 rounded-full" :src="post.source.image || post.source.link + 'favicon.ico'" alt="" /></a></b></span>
    </div>
    <span class='text-xl' v-html='post.summary || post.content'></span>
  </div> -->
</template>
<script>
export default {
  props: {
    post: Object
  },
//   async setup(props) {
//     const res = await fetch(`http://localhost:3000/api/cohort/${props.cohort.id}`).then(res => res.json())
//     return { cohort: res.cohort, posts: res.posts }
//   },
}
</script>
<style>
.post img {
  max-width: 500px;
  max-height: 400px;
}

a.post{
  color: black;
  text-decoration: none;
}

a.post:hover {
  background-color: #fff;
}
</style>



