// ./components/Feed.tsx
import { sanityFetch } from "@/sanity/lib/fetch"
import { LastLiveEventIdProps } from "./LiveBlog"
import { groq, PortableText } from "next-sanity"
import { FeedQueryResult } from "@/sanity.types"

const feedQuery = groq`*[_type == "post"]|order(_createdAt desc)`

// `lastLiveEventId` is passed down from the route component's `searchParams` prop
export async function Feed({ lastLiveEventId }: LastLiveEventIdProps) {
  const [posts, LiveSubscription]: [FeedQueryResult, any] = await sanityFetch({
    query: feedQuery,
    lastLiveEventId,
  })

  return (
    <div>
      {posts.map((post) => {
        const time = new Date(post._createdAt).toLocaleTimeString()
        return (
          <div key={post._id}>
            <div>
              <div>{time}</div>
            </div>
            <div>
              <h3>{post.title}</h3>
              <div>
                {post.body && <PortableText value={post.body} />}
              </div>
            </div>
          </div>
        )
      })}
      <LiveSubscription />
    </div>
  )
}