import { useEffect, useState } from "react";
import { useMatches } from "react-router";

export const useBreadcrumbs = (): any[] => {
  const [crumbs, setCrumbs] = useState<any[]>([]);
  let matches = useMatches();

  useEffect(() => {
    const _crumbs = matches
      // @ts-ignore
      .filter((match) => Boolean(match.handle?.crumb))
      // @ts-ignore
      .map((match) => match.handle?.crumb(match.data));

    setCrumbs(_crumbs);
  }, matches);

  return crumbs;
};