import { defineComponent, ref } from "vue";
import useHead from "@/useHead.ts";
import DjTooltip, { setupTooltip } from "@/DjTooltip.tsx";
import { addCSS, css } from "@/util.ts";

const styles = css`
.supercontainer {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container {
    width: 800px;
}
`;

export default defineComponent({
    name: "app-root",
    setup() {
        addCSS('dj-blog-root', styles);

        useHead({ title: "djblog Home" });

        const tooltipCarrier = ref<HTMLDivElement | null>(null);
        setupTooltip({ carrier: tooltipCarrier });

        return () => <>
            <div ref={tooltipCarrier} class="tooltip-carrier" />
            <div class="supercontainer">
                <div class="container">
                    <DjTooltip tooltip="come in and find out...">
                        <h1>dj blog</h1>
                    </DjTooltip>
                </div>
            </div>
        </>;
    },
});