'use client';

import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';

import Breadcrumbs, { BreadcrumbItem } from './Breadcrumbs';

type BreadcrumbsContextValue = {
  setExtraItems: (items: BreadcrumbItem[]) => void;
};

const BreadcrumbsContext = createContext<BreadcrumbsContextValue | null>(null);

type BreadcrumbsShellProps = {
  baseItems: BreadcrumbItem[];
  sticky?: boolean;
  className?: string;
  children: React.ReactNode;
};

const BreadcrumbsShell: React.FC<BreadcrumbsShellProps> = ({
  baseItems,
  sticky = false,
  className,
  children,
}) => {
  const [extraItems, setExtraItems] = useState<BreadcrumbItem[]>([]);
  const value = useMemo(() => ({ setExtraItems }), []);
  const mergedItems = useMemo(() => baseItems.concat(extraItems), [baseItems, extraItems]);

  return (
    <BreadcrumbsContext.Provider value={value}>
      <Breadcrumbs items={mergedItems} sticky={sticky} className={className} />
      {children}
    </BreadcrumbsContext.Provider>
  );
};

export const BreadcrumbsSlot: React.FC<{
  items: BreadcrumbItem[];
}> = ({ items }) => {
  const context = useContext(BreadcrumbsContext);

  useEffect(() => {
    if (!context) return;
    context.setExtraItems(items);
    return () => {
      context.setExtraItems([]);
    };
  }, [context, items]);

  return null;
};

export default BreadcrumbsShell;