'use client';
import React from 'react';
import Button from '@/components/base/Button';
import Image from 'next/image';
import Link from 'next/link';
import {
  Navbar,
  NavbarMenuToggle,
  NavbarMenu,
  NavbarMenuItem,
  NavbarContent,
  NavbarItem,
  NavbarBrand
} from '@heroui/navbar';

import logo from '@/assets/img/logo.png';

const Header: React.FC<IHeader> = ({ button, menuItems }) => {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
  console.log('button', button);
  const handleMenuClose = () => {
    setIsMenuOpen(false);
  };

  const renderMenuItems = () =>
    menuItems?.map(({ label, url }) => (
      <NavbarMenuItem key={label} className="text-sm text-background">
        <Link href={url} onClick={handleMenuClose}>
          {label}
        </Link>
        <div className="sm:hidden w-full border-b-[0.1px] border-default-500 pt-5" />
      </NavbarMenuItem>
    ));

  const renderButton = () =>
    button && (
      <NavbarMenuItem>
        <Button
          as={Link}
          size="md"
          className="text-sm md:px-10"
          color="default"
          href={button.url}
          onPress={handleMenuClose}>
          {button.label}
        </Button>
      </NavbarMenuItem>
    );

  return (
    <React.Fragment>
      <div className="h-[4.5rem] bg-default-900" />
      <header className="fixed top-0 w-full bg-default-900 bg-opacity-80 backdrop-blur-md z-50">
        <Navbar
          isBlurred={false}
          maxWidth="2xl"
          className="border-b-1 border-b-default-700"
          classNames={{
            base: 'bg-transparent py-1',
            wrapper: 'px-2',
            menuItem: 'pt-5 sm:pt-0',
            menu: 'bg-default-900'
          }}
          isMenuOpen={isMenuOpen}
          onMenuOpenChange={setIsMenuOpen}>
          <NavbarBrand>
            <Link href="/">
              <Image priority src={logo} alt="Maf Junction" className="w-32" />
            </Link>
          </NavbarBrand>

          {/* Mobile */}
          <NavbarContent justify="end" className="sm:hidden">
            <NavbarItem>
              <NavbarMenu>
                {renderMenuItems()} {renderButton()}
              </NavbarMenu>
            </NavbarItem>
          </NavbarContent>
          <NavbarMenuToggle className="sm:hidden text-background" />

          {/* Desktop */}
          <NavbarContent
            className="hidden sm:flex gap-4 text-background"
            justify="center">
            {renderMenuItems()} {renderButton()}
          </NavbarContent>
        </Navbar>
      </header>
    </React.Fragment>
  );
};

export default Header;
