'use client-only';

import { Post } from '@/lib/getPosts';
import { FC } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

interface PostProps {
  posts: Post[];
}
const Posts: FC<PostProps> = ({ posts }) => {
  return (
    <>
      {posts.map((p) => (
        <div className="space-y-2 rounded-md border border-solid border-gray-700 p-4 text-white">
          <p className="font-bold">@{p.author.name}</p>
          <p className="italic">{p.title}</p>
          <div className="markdown">
            {p.message && (
              <ReactMarkdown children={p.message} remarkPlugins={[remarkGfm]} />
            )}
          </div>
          <small>{new Date(p.time * 1000).toLocaleString()}</small>
        </div>
      ))}
    </>
  );
};

export default Posts;