import { Title } from "@common/components/Title";
import styles from '../assets/app.module.css';
import { useAppState } from "../contexts/state";
import { ChatSidebar } from "./chat-sidebar";
import { Editor } from "./editor";
import Prompt from "../utils/prompt";

export const App = () => {
    const appState = useAppState();
    const { currentStory } = appState;

    return (
        <div class={styles.root}>
            {currentStory
                ? <Title>{Prompt.substituteVars(appState, currentStory.title)} - Storywriter</Title>
                : <Title>Storywriter</Title>}
            <Editor />
            <ChatSidebar />
        </div>
    );
};
