"use client"
import { LogoutLink, useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
import { BsThreeDotsVertical } from "react-icons/bs";
import Image from 'next/image';
import React from 'react'
import {DropdownMenu, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
import { DropdownMenuContent } from '@radix-ui/react-dropdown-menu';


const DashboardHeader = () => {
  const {user} = useKindeBrowserClient();

  return user && (
    <div className='p-5 sm:p-10'>
      <div>
        <DropdownMenu>
          <DropdownMenuTrigger className='flex items-center float-right outline-none '>
              <Image src={user?.picture} alt='user-img' width={30} height={30} className='rounded-full'/>
              <BsThreeDotsVertical/>
          </DropdownMenuTrigger>
          <DropdownMenuContent className='border border-gray-200 mt-1 bg-white'>
            <DropdownMenuLabel>{user.given_name}</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Setting</DropdownMenuItem>
            <DropdownMenuItem><LogoutLink>Logout</LogoutLink></DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  )
}

export default DashboardHeader