import { ComponentChildren } from "preact";
import { render_and_copy } from "./common.tsx";
import { Top, Bottom, Hrish } from "./this-post-is-two-posts.tsx";

// this would be a funny time to do multiple posts

export const Post = ({
    children,
    headline,
    n_comments,
    display_name,
    username,
    posted,
    link,
    id,
}: {
    children?: ComponentChildren;

    headline?: string;

    n_comments: number;

    display_name?: string;
    username: string;
    posted: string;
    link: string;
    id?: string;
}) => (
    <div class="post">
        <Top
            display_name={display_name}
            username={username}
            posted={posted}
            link={link}
            id={id}
        />
        <Hrish />
        <div class="post-inner">
            {headline && (
                <div class="headline">
                    <a href={link}>
                        <h1>{headline}</h1>
                    </a>
                </div>
            )}
            <div class="post-content">{children}</div>
        </div>
        <Hrish />
        <Bottom n_comments={n_comments} />
    </div>
);

render_and_copy(
    <Post
        headline="can i have more than one post please"
        username="onepost"
        display_name="one post per user"
        posted="1 post"
        link="dummy"
        n_comments={413}
    >
        Hello world how's it going
    </Post>
);