'use client';
import { Container, Navbar, Dropdown } from "react-bootstrap";
import { useEffect, useState } from "react";
import ProfileDropdown from "./ProfileDropdown";
import { useSelector } from "react-redux";
import Link from "next/link";

const Header = () => {

  const [isOpen, setIsOpen] = useState(false);
  const {profile_image_url} = useSelector((state: any) => state?.profile);
  const [showDropdown, setShowDropdown] = useState(false);

  return (
    <>
      <header className="site-header">
        <Container fluid className="header-nav">
          <Navbar expand="lg">
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <div className="d-flex align-items-center ms-auto gap-3">
              <Link href="/profile-menu" className="d-lg-none d-inline">
                <img
                  src={profile_image_url}
                  width={34}
                  height={34}
                  className="rounded object-fit"
                  alt=""
                />
              </Link>
              {/* <Dropdown className="profile-dd d-none d-lg-inline">
                <Dropdown.Toggle>
                  <div className="d-flex gap-2">
                    <div>
                      <img
                        src={profile_image}
                        width={34}
                        height={34}
                        className=" object-fit"
                        alt=""
                      />
                    </div>
                  </div>
                </Dropdown.Toggle>
                <Dropdown.Menu align="end">
                  <ProfileDropdown />
                </Dropdown.Menu>
              </Dropdown> */}

              <Dropdown
                className="profile-dd d-none d-lg-inline"
                show={showDropdown}
                onToggle={() => setShowDropdown(!showDropdown)}
              >
                <Dropdown.Toggle onClick={() => setShowDropdown(!showDropdown)} style={{ background: 'none' }}>
                  <div className="d-flex gap-2">
                    <div>
                      <img
                        src={profile_image_url}
                        width={30}
                        height={30}
                        className="object-fit rounded"
                        alt=""
                      />
                    </div>
                  </div>
                </Dropdown.Toggle>

                <Dropdown.Menu align="end">
                  <ProfileDropdown closeDropdown={() => setShowDropdown(false)} />
                </Dropdown.Menu>
              </Dropdown>

            </div>
          </Navbar>
        </Container>
      </header >
    </>
  );
};
export default Header;