import { Post } from '../model/posts/posts.ts'
import { Temporal } from '@js-temporal/polyfill'

interface PostsFeedProps {
  posts: Post[]
}

export function PostsFeed({ posts }: PostsFeedProps) {
  const formatDate = (date: Temporal.PlainDateTime) => {
    return date.toLocaleString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    })
  }

  return (
    <div className="flex flex-col gap-6 w-full">
      {posts.map((post) => (
        <article className="w-full p-4 " key={post.postId}>
          <div className="text-sm text-gray-500 mb-3">{formatDate(post.createdAt)}</div>

          <div className="text-gray-800 mb-4 whitespace-pre-wrap">{post.content}</div>

          {post.media.length > 0 && (
            <div className="grid gap-4 grid-cols-1">
              {post.media.map((src) => (
                <img key={src} src={src} alt="" className="w-full h-auto" loading="lazy" />
              ))}
            </div>
          )}
        </article>
      ))}
    </div>
  )
}