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

export function UserPage(props: {
  profile: { username: string; displayName: string; avatarKey: string | null; bio: string; url: string };
  settings: SiteSettings;
  currentUser: CurrentUser | null;
  csrfToken: string;
  posts: FeedPost[];
  commentsByPost: Map<string, CommentView[]>;
  links: Array<{ id: string; name: string; url: string; avatar: string | null; description: string; category: string }>;
}) {
  return (
    <Layout settings={props.settings} currentUser={props.currentUser} csrfToken={props.csrfToken} links={props.links} title={props.profile.displayName} showHero={false}>
      <section class="profile-card">
        <img src={mediaUrl(props.settings.cdn_base_url, props.profile.avatarKey)} alt="" />
        <div>
          <h1>{props.profile.displayName}</h1>
          <p>@{props.profile.username}</p>
          {props.profile.bio ? <p>{props.profile.bio}</p> : null}
          {props.profile.url ? <a href={props.profile.url} target="_blank" rel="noopener noreferrer">{props.profile.url}</a> : null}
        </div>
      </section>
      <div class="feed-list">
        {props.posts.map((post) => (
          <PostItem post={post} comments={props.commentsByPost.get(post.id) || []} settings={props.settings} currentUser={props.currentUser} />
        ))}
      </div>
    </Layout>
  );
}
