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

export function HeaderWithSocials({
  logo = 'FaCode',
  socials,
  showThemeToggle = true,
  sectionId,
  styling,
}: SocialHeaderProps) {
  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'>
          <a className='flex items-center w-[24px] h-[24px]'>{icon}</a>
          <div className='items-center flex flex-row'>
            <Socials socials={socials} width={32} styling={{ padding: { top: 0, right: 0, bottom: 0, left: 0 } }} />
            {showThemeToggle && (
              <div className='border-l-2 border-[var(--color-text)] ml-4 pl-4 self-center'>
                <ThemeToggle />
              </div>
            )}
          </div>
        </div>
      </Wrapper>
      <MobileMenu socials={socials} showThemeToggle={showThemeToggle} icon={icon} styling={styling} />
      {!isBuilder && <div style={{ height: `${height}px` }} />}
    </>
  );
}
