import type { CurrentUser, SiteSettings } from '../env';
import type { CommentView } from '../services/comments';
import type { FeedPost } from '../services/posts';
import { PostItem } from './components/post-item';
import { Layout } from './layout';

export function HomePage(props: {
  settings: SiteSettings;
  currentUser: CurrentUser | null;
  csrfToken: string;
  posts: FeedPost[];
  commentsByPost: Map<string, CommentView[]>;
  nextCursor: string | null;
  links: Array<{ id: string; name: string; url: string; avatar: string | null; description: string; category: string }>;
  title?: string;
}) {
  return (
    <Layout settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} links={props.links} title={props.title}>
      <div class="feed-list" data-feed-list data-next-cursor={props.nextCursor || ''}>
        {props.posts.length ? (
          props.posts.map((post) => (
            <PostItem post={post} comments={props.commentsByPost.get(post.id) || []} settings={props.settings} currentUser={props.currentUser} />
          ))
        ) : (
          <p class="empty-state">还没有公开内容</p>
        )}
      </div>
      <div class="feed-loading" data-feed-loading hidden>加载中...</div>
    </Layout>
  );
}
