'use client';
import { MobileMenuProps } from '@/src/types/header';
import { Menu, X } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Socials } from '../elements/Socials';
import { ThemeToggle } from '@/src/components/colors/ThemeToggle';
import Wrapper from '@/components/common/Wrapper';

export function MobileMenu({
  navItems,
  socials,
  buttonText,
  buttonHref,
  showThemeToggle = true,
  styling,
  icon,
}: MobileMenuProps) {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
  }, [isOpen]);

  return (
    <Wrapper
      className='md:hidden bg-[var(--color-background)] text-[var(--color-text)] fixed top-0 left-0 w-full z-[9999]'
      styling={styling}
    >
      <div className='flex items-center justify-between'>
        <div className='flex items-center w-[24px] h-[24px]'>{icon}</div>
        <button
          type='button'
          className='p-2 rounded-md transition-colors'
          onClick={() => setIsOpen(true)}
          aria-label='Open mobile menu'
        >
          <Menu className='h-6 w-6' />
        </button>
      </div>

      {isOpen && (
        <div className='fixed inset-0 bg-[var(--color-background)] z-[9999] h-screen'>
          <div className='relative h-full flex flex-col'>
            <div className='absolute top-4 right-4 z-[10000]'>
              <button
                type='button'
                className='p-2 rounded-full text-[var(--color-text)] transition-colors'
                onClick={() => setIsOpen(false)}
                aria-label='Close mobile menu'
              >
                <X className='h-6 w-6' />
              </button>
            </div>

            <div className='flex flex-col items-center justify-center h-screen bg-[var(--color-background)]'>
              {navItems && navItems.length > 0 && (
                <div className='w-full flex flex-col space-y-4'>
                  {navItems.map((item) => (
                    <a
                      key={crypto.randomUUID()}
                      href={item.href}
                      onClick={() => setIsOpen(false)}
                      className='text-center py-3 px-4 text-lg font-medium text-[var(--color-text)] rounded-md transition-colors'
                    >
                      {item.text}
                    </a>
                  ))}
                </div>
              )}

              {buttonText && buttonHref && (
                <a
                  href={buttonHref}
                  onClick={() => setIsOpen(false)}
                  className='md:w-full text-center px-4 py-1 mb-6 rounded-md bg-[var(--color-text)] text-[var(--color-background)] text-lg font-medium transition-all duration-300 hover:shadow-md w-fit'
                >
                  {buttonText}
                </a>
              )}

              {socials && (
                <Socials socials={socials} width={32} className='gap-2 flex-col items-center justify-center' />
              )}

              {showThemeToggle && (
                <div className='w-full pt-6 max-w-[90%] border-t border-[var(--color-text)] flex justify-center text-[var(--color-text)]'>
                  <ThemeToggle />
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </Wrapper>
  );
}
