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 = "https://static.pyrope.net/cursor-fun-end",
    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 style="display: flex;">
                <div class="post-content">{children}</div>
            </div>
        </div>
        <Hrish />
        <Bottom n_comments={n_comments} />
    </div>
);

render_and_copy(
    <div class="posts">
        <Post
            headline="can i have more than one post please"
            username="mehbark"
            posted="6 hr. ago"
            n_comments={2}
        >
            one post isn't really enough for me
        </Post>
        <Post
            headline="@onepost says"
            username="onepost"
            display_name="one post per user"
            posted="6 hr. ago"
            n_comments={1}
        >
            i don't really make the rules i'm just a bot
        </Post>
        <Post
            headline="@onepost says"
            username="onepost"
            display_name="one post per user"
            posted="5 hr. ago"
            n_comments={11}
        >
            wait a minute! i didn't say that! you're putting posts in my mouth!
        </Post>
        <Post
            headline="my bad"
            username="mehbark"
            posted="3 hr. ago"
            n_comments={0}
        >
            i'm sorry about that do you want a css crime as penance
        </Post>
        <Post
            headline="@onepost says"
            username="onepost"
            display_name="one post per user"
            posted="2 hr. ago"
            n_comments={111}
        >
            isn't this whole thing a css crime (that probably won't work)?
        </Post>
        <Post
            headline="my bad"
            username="mehbark"
            posted="30 min. ago"
            n_comments={3}
        >
            <span style='background: url("https://t4.ftcdn.net/jpg/02/31/38/67/240_F_231386743_1tDqjFySEGvqfoctbankdrsPTS7C76cz.jpg") 50% 50% no-repeat fixed;'>
                oh yeah, good point! that makes my job a lot easier
            </span>
        </Post>
    </div>
);