import { FC, PropsWithChildren } from 'react';
import { useMatches } from 'react-router';
import { Breadcrumbs } from './Breadcrumbs';

export const BreadcrumbsGlobal: FC<PropsWithChildren> = () => {
  const matches = useMatches() as {
    handle?: { title?: string };
  }[];

  const title = matches.reverse().find((match) => !!match.handle?.title)
    ?.handle?.title;

  return (
    <div className="h-12 flex flex-col justify-center bg-white p-2 text-lg text-black/90 font-medium dark:text-white/90">
      {matches.length > 4 && <Breadcrumbs crumbClassName="text-sm" />}
      <p className="text-xl font-bold">{title}</p>
    </div>
  );
};
