'use client';
import { findNavByUrl } from '@/config/navs';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@workspace/airo-ui/components/breadcrumb';
import { SidebarTrigger } from '@workspace/airo-ui/components/sidebar';
import { useTranslations } from 'next-intl';
import { usePathname } from 'next/navigation';
import { Fragment, useMemo } from 'react';

export function Header() {
  const t = useTranslations('menu');
  const pathname = usePathname();
  const items = useMemo(() => findNavByUrl(pathname), [pathname]);
  return (
    <header className='flex h-[84px] w-full items-center justify-end gap-2 px-4 pt-4 md:hidden'>
      <SidebarTrigger className={'fixed left-4 z-50'} />
      <Breadcrumb>
        <BreadcrumbList className={'text-[36px] font-semibold'}>
          {items.map((item, index) => {
            return (
              <Fragment key={item?.title}>
                {index !== items.length - 1 && (
                  <BreadcrumbItem>
                    <BreadcrumbLink
                      href={item?.url || '/dashboard'}
                      className={'font-semibold text-[#0F2C53]'}
                    >
                      {t(item?.title)}
                    </BreadcrumbLink>
                  </BreadcrumbItem>
                )}
                {index < items.length - 1 && <BreadcrumbSeparator />}
                {index === items.length - 1 && (
                  <BreadcrumbPage className={'font-semibold text-[#0F2C53]'}>
                    {t(item?.title)}
                  </BreadcrumbPage>
                )}
              </Fragment>
            );
          })}
        </BreadcrumbList>
      </Breadcrumb>
    </header>
  );
}
