<template>
<section class='mt-4'>
  <!-- <h3 class='text-3xl font-extrabold'>{{cohort.name}}</h3> -->
  <div class="font-bold text-3xl">{{cohort.name}}</div>
  <div class='font-light mb-2'>{{cohort.dailyView}} views/day, last update: {{posts[0].updatedAt}}</div>
  <button class='p-2 rounded bg-orange-100 hover:bg-orange-200 mr-1 shadow'>Feed <RssIcon class='fill-orange-600 inline h-5'/></button>
  <button class='p-2 rounded bg-orange-100 hover:bg-orange-200 mr-1 shadow'>Embedd <ShareIcon class='inline h-5'/></button>
  <p class="text-gray-700 text-base">{{cohort.description}}</p>
  <ul>
    <Post v-for='post in posts' :key='post.id' :post='post'/>
    <!-- <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>  
</section>
</template>
<script>
export default {
  
}
// import { RssIcon, ShareIcon } from '@heroicons/vue/solid'

  // const route = useRoute()
  // const cohort = await $fetch('/api/cohort/' + route.params.id)
  // const { cohort, posts } = await $fetch('http://localhost:3000/api/cohort/' + route.params.id)
  // console.error(cohort)
// import Cohort from '@/components/Cohort.vue'
// export default {
//   components: { Cohort },
//   async setup () {

//   }
// }
//   data: () => ({ cohorts: [] }),
//   async setup() {
//     // const lastPosts = await fetch('http://localhost:3000/api/posts').then(res => res.json())
//     const cohorts = await fetch('http://localhost:3000/api/cohorts').then(res => res.json())
//     console.error(cohorts)

//     return { cohorts }
//   },
//   methods: {
//     addCohort (cohort) {
//       console.error('dentro add cohort', cohort)
//       this.cohorts.push(cohort)
//     }
//   }
// })
</script>