'use client';
import { getFilteredIcons } from '@/components/icons/FaIcons';
import { ThemeToggle } from '@/src/components/colors/ThemeToggle';
import { MenuHeaderProps } from '@/types/header';
import { MobileMenu } from './MobileMenu';
import Wrapper from '@/components/common/Wrapper';
import { usePathname } from 'next/navigation';
import { cn } from '@/src/lib/utils';

export function HeaderWithMenu({ items, logo = 'FaCode', showThemeToggle, sectionId, styling }: MenuHeaderProps) {
  const pathname = usePathname();
  const isBuilder = pathname.includes('/portfolios/') && !pathname.includes('/preview');
  const isPreview = pathname.includes('/preview');
  const height = (styling?.padding?.top ?? 20) + (styling?.padding?.bottom ?? 20) + 38;
  const icon = getFilteredIcons(logo)[logo];
  return (
    <>
      <Wrapper
        id={sectionId}
        styling={styling}
        className={cn(
          'bg-[var(--color-background)] text-[var(--color-text)] w-full flex justify-center backdrop-blur-lg max-w-none hidden md:flex',
          !isBuilder ? 'fixed top-0 left-0 z-[999]' : '',
          isPreview ? 'top-[64px]' : ''
        )}
      >
        <div className='justify-between flex w-full items-center max-w-[1366px] mx-auto'>
          <div className='flex items-center w-[24px] h-[24px]'>{icon}</div>
          <div className='items-center space-x-6'>
            {items?.map((item) => (
              <a
                key={crypto.randomUUID()}
                href={item.href}
                className='relative transition-colors hover:text-current group'
              >
                {item.text}
                <span className='absolute left-0 bottom-0 w-0 h-0.5 bg-current transition-all duration-500 group-hover:w-full'></span>
              </a>
            ))}
          </div>
          <div className='hidden md:block'>{showThemeToggle && <ThemeToggle />}</div>
        </div>
      </Wrapper>
      <MobileMenu navItems={items} showThemeToggle={showThemeToggle} icon={icon} styling={styling} />
      {!isBuilder && <div style={{ height: `${height}px` }} />}
    </>
  );
}
