import { Database, Message } from "types";
import WithStyleSheet from "components/WithStyleSheet.tsx";
import { page_style } from "style";
import RenderMsg from "components/RenderMsg.tsx";

export default function ConversationLink({
    conv,
    db,
    interactive,
}: {
    conv: string;
    db: Database;
    interactive: boolean;
}) {
    const conv_ = db.conversations[conv];
    if (!conv_) return <></>;

    const name: Message = {
        content: conv_.name,
        preset: "page",
    };
    const description: Message = {
        content: conv_.description,
        preset: "page",
    };

    return (
        <>
            <WithStyleSheet href="/ConversationLink.css" />
            <div className="conversation-link" style={page_style(conv_)}>
                <a href={`/${conv}${interactive ? "/i" : ""}`}>
                    <RenderMsg
                        conversation={conv_}
                        db={db}
                        msg={name}
                        additional_style={{ fontWeight: "bold" }}
                    />
                    <RenderMsg
                        additional_style={{ fontWeight: "normal" }}
                        conversation={conv_}
                        db={db}
                        msg={description}
                    />
                </a>
            </div>
        </>
    );
}