"use client";
import Image from "next/image";
import { icons } from "#/assets/icons";
import * as React from "react";
import { DropdownMenu } from "radix-ui";
import Link from "next/link";
import Theme from "./theme";
import { signOutFunc } from "#/lib/function";

export default function AdminHeader() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <nav className="header r-flex-between px-[44px] py-[20px] ">
        <p className="name text-[26px]">
          Bienvenue, <span>Ken B.</span>{" "}
        </p>
        <div className="r-flex-between justify-center items-center r-gap-12">
          <Theme />
          {/* <ProfilePicture /> */}

          <button type="button" className="icon-border">
            <Image src={icons.notificationsIcon} alt="Notifications" />
          </button>
          <div className="relative">
            <DropdownMenu.Root open={open} onOpenChange={setOpen}>
              <DropdownMenu.Trigger asChild>
                <div className="r-flex-between justify-center items-center r-gap-12 cursor-pointer ">
                  <Image src={icons.profilePicture} alt="ProfilePicture" />
                  <button className="IconButton" aria-label="Customise options">
                    <Image
                      src={icons.arrowUp}
                      alt="arrowUp"
                      className={`transition-transform duration-300 ${
                        open ? "scale-y-[-1]" : ""
                      }`}
                    />
                  </button>
                </div>
              </DropdownMenu.Trigger>

              <DropdownMenu.Portal>
                <DropdownMenu.Content
                  className="DropdownMenuContent dropdown-menu r-flex-column r-secondary p-2"
                  sideOffset={0}
                  side="bottom"
                  align="end"
                >
                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
                    <Link href="#" className="d-flex items-start ">
                      <Image src={icons.userIcon} alt="Profil" />
                      Profil
                    </Link>
                  </DropdownMenu.Item>
                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px] outline-none hover:bg-blue-100 rounded-md">
                    <Link
                      href="#"
                      onClick={() => signOutFunc()}
                      className="d-flex items-start r-danger "
                    >
                      <Image src={icons.logoutRed} alt="Deconnexion" />
                      Déconnexion
                    </Link>
                  </DropdownMenu.Item>
                </DropdownMenu.Content>
              </DropdownMenu.Portal>
            </DropdownMenu.Root>
          </div>
        </div>
      </nav>
    </>
  );
}