'use client';
import { getFilteredIcons } from '@/components/icons/FaIcons';
import { ThemeToggle } from '@/src/components/colors/ThemeToggle';
import { ButtonHeaderProps } 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 HeaderWithButton({
  logo = 'FaCode',
  buttonText,
  buttonHref,
  showThemeToggle = true,
  sectionId,
  styling,
}: ButtonHeaderProps) {
  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'>
          <div className='flex items-center w-[24px] h-[24px]'>{icon}</div>
          <div className='items-center flex flex-row'>
            <a
              href={buttonHref}
              target='_blank'
              className='px-4 py-1 rounded-md bg-[var(--color-text)] text-[var(--color-background)] 
                  transition-all duration-300 hover:shadow-md'
            >
              {buttonText}
            </a>
            {showThemeToggle && (
              <div className='border-l-2 border-[var(--color-text)] ml-4 pl-4 self-center'>
                <ThemeToggle />
              </div>
            )}
          </div>
        </div>
      </Wrapper>
      <MobileMenu
        buttonText={buttonText}
        buttonHref={buttonHref}
        showThemeToggle={showThemeToggle}
        icon={icon}
        styling={styling}
      />
      {!isBuilder && <div style={{ height: `${height}px` }} />}
    </>
  );
}
