<template>
<v-card>
  <v-card-title>{{cohort.name}}</v-card-title>
  <v-card-subtitle>{{cohort.description}}</v-card-subtitle>
  <v-card-text>
    <span>{{cohort}} {{posts}}</span>
  </v-card-text>
</v-card>
  <!-- <h3 class="font-bold text-2xl text-gray-600 bg-gray-100 p-2">{{cohort.name}}</h3>
  <span class="float-right text-xs">{{cohort.dailyView}} <RssIcon class='h-8'/></span>
  <ul v-if='withContent'>
    <a v-for='post in posts' :key="post.URL" target="_blank" :href='post.URL' class="hover:bg-zinc-200 block pt-2 px-2">
        <div class="font-bold text-black" v-html='post.title'></div>
        <span class="font-base text-xs">
          {{new Date(post.date).toLocaleString()}}
          <b>{{post.source.name}}</b>
        </span>
        <span v-html='post.summary'></span>
    </a>
  </ul>
</div> -->
</template>
<script>
// import { RssIcon } from '@heroicons/vue/solid'
export default {
  // components: { RssIcon },
  data: () => ({
    posts: []
  }),
  props: {
    cohort: {
      type: Object,
      required: true
    },
    withContent: {
      type: Boolean,
      default: false
    },
    maxPosts: {
      type: Number,
      default: 10
    }
  },
  async fetch() {
    console.error('dentro fetch')
    console.error(this.cohort)
    this.posts = await this.$http.$get(`http://localhost:3000/api/cohort/${this.cohort.id}`,
      { params: { maxPosts: this.maxPosts }})
    // console.error(res)
    // .then(res => res.json())
  },
}
</script>
<style lang="scss" scoped>
.card {
  @apply w-full rounded-md mt-3 inline-block mr-1
    border-pink-500;
  }
</style>