"use client";

import {
  createContext,
  useContext,
  useEffect,
  useMemo,
  useState,
  type ReactNode,
} from "react";

type BreadcrumbContextValue = {
  segmentLabels: Record<string, string>;
  setSegmentLabels: (labels: Record<string, string>) => void;
};

const BreadcrumbContext = createContext<BreadcrumbContextValue | null>(null);

export function BreadcrumbProvider({ children }: { children: ReactNode }) {
  const [segmentLabels, setSegmentLabels] = useState<Record<string, string>>({});
  const value = useMemo(
    () => ({ segmentLabels, setSegmentLabels }),
    [segmentLabels]
  );
  return (
    <BreadcrumbContext.Provider value={value}>
      {children}
    </BreadcrumbContext.Provider>
  );
}

export function useBreadcrumbSegmentLabels() {
  return useContext(BreadcrumbContext)?.segmentLabels ?? {};
}

/** Sets dynamic breadcrumb labels for the current page (e.g. blog post title). */
export function SetBreadcrumbLabels({ labels }: { labels: Record<string, string> }) {
  const setSegmentLabels = useContext(BreadcrumbContext)?.setSegmentLabels;
  const labelsKey = JSON.stringify(labels);

  useEffect(() => {
    if (!setSegmentLabels) return;
    setSegmentLabels(labels);
    return () => setSegmentLabels({});
  }, [labelsKey, labels, setSegmentLabels]);

  return null;
}