"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";

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" sideOffset={0} side="bottom" align="end" >
                  <DropdownMenu.Item className="DropdownMenuItem dropdown-item text-[14px]">
                    <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]">
                    <Link href="#" 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>
    </>
  )
}