"use client";
import React, { useId, useMemo, PropsWithChildren } from "react";
import { DashboardContext } from "@/components/layout/dashboard/dashboard.context";
import { MediaPickerProvider } from "@/components/ui/media-picker";
import { ProfilePickerProvider } from "@/components/ui/profile-picker";

type DashboardProviderProps = PropsWithChildren;

export const DashboardProvider: React.FC<DashboardProviderProps> = (props) => {
    const {
        children
    } = props;

    const breadcumbsTargetId = useId();

    const data = useMemo(() => {
        return {
            breadcrumpsTargetId: breadcumbsTargetId
        };
    }, [breadcumbsTargetId]);

    return (
        <DashboardContext value={data}>
            <MediaPickerProvider>
                <ProfilePickerProvider>
                    {children}
                </ProfilePickerProvider>
            </MediaPickerProvider>
        </DashboardContext>
    );
};