"use client";
import React, { useState, useEffect, PropsWithChildren } from "react";
import { createPortal } from "react-dom";
import { Breadcrumb, BreadcrumbItem } from "@/components/layout/breadcrumb";
import { useDashboardContext } from "@/components/layout/dashboard/dashboard.context";

type DashboardBreadcrumpsProps = PropsWithChildren;

export function DashboardBreadcrump(props: DashboardBreadcrumpsProps) {
    const {
        children
    } = props;

    const { breadcrumpsTargetId } = useDashboardContext();

    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
    }, []);

    if(!mounted)
        return null;

    const target = document.getElementById(breadcrumpsTargetId);

    if(!target) {
        return null
    }

    return createPortal(
        <Breadcrumb>
            <BreadcrumbItem href="/dashboard">
                Dashboard
            </BreadcrumbItem>

            {children}
        </Breadcrumb>,
        target
    );
}