import { Database } from "types";
import Msg from "components/Msg.tsx";
import { conv_style, msg_style, page_style } from "style";
import { Head } from "$fresh/runtime.ts";
import WithStyleSheet from "components/WithStyleSheet.tsx";

export default function Conv({
    conv,
    db,
    children,
}: {
    conv: string;
    db: Database;
    children?: any;
}) {
    const conv_ = db.conversations[conv];
    return (
        <>
            <WithStyleSheet href="/Conv.css" />
            <Head>
                <title>{conv_.name}</title>
            </Head>
            <div style={page_style(conv_)} className="convo-body">
                <a href="/">
                    <h1
                        className="name"
                        // style={msg_style(
                        //     { content: "", preset: "name"  },
                        //     db,
                        //     conv_
                        // )}
                    >
                        {conv_.name}
                    </h1>
                    <p
                        className="description"
                        // style={{
                        //     ...msg_style(
                        //         { content: "", preset: "description" },
                        //         db,
                        //         conv_
                        //     ),
                        //     fontWeight: "normal",
                        // }}
                    >
                        {conv_.description}
                    </p>
                </a>
                <div className="chat-container" style={conv_style(conv_)}>
                    <div className="chat">
                        {conv_.messages.map(msg => (
                            <Msg message={msg} db={db} conversation={conv_} />
                        ))}
                    </div>
                </div>
                {children}
            </div>
        </>
    );
}
