"use client"

import {

BadgeCheck,

ChevronsUpDown,

LogOut,

} from "lucide-react"

import {

Avatar,

AvatarFallback,

AvatarImage,

} from "@/components/ui/avatar"

import {

DropdownMenu,

DropdownMenuContent,

DropdownMenuGroup,

DropdownMenuItem,

DropdownMenuLabel,

DropdownMenuSeparator,

DropdownMenuTrigger,

} from "@/components/ui/dropdown-menu"

import {

SidebarMenu,

SidebarMenuButton,

SidebarMenuItem,

useSidebar,

} from "@/components/ui/sidebar"

import { createClient } from "@/lib/supabase/client"

import { useRouter } from "next/navigation"

export function NavUser({

user,

}: {

user: {

name: string

email: string

avatar: string

}

}) {

const { isMobile } = useSidebar()

const router = useRouter()

const handleSignOut = async () => {

try {

const supabase = createClient()

await supabase.auth.signOut()

router.push("/dashboard/login")

} catch {

router.push("/dashboard/login")

}

}

return (

<SidebarMenu>

<SidebarMenuItem>

<DropdownMenu>

<DropdownMenuTrigger asChild>

<SidebarMenuButton

size="lg"

className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"

>

<Avatar className="h-8 w-8 rounded-lg">

<AvatarImage src={user.avatar} alt={user.name} />

<AvatarFallback className="rounded-lg">

{user.name.slice(0, 2).toUpperCase()}

</AvatarFallback>

</Avatar>

<div className="grid flex-1 text-left text-sm leading-tight">

<span className="truncate font-semibold">{user.name}</span>

<span className="truncate text-xs">{user.email}</span>

</div>

<ChevronsUpDown className="ml-auto size-4" />

</SidebarMenuButton>

</DropdownMenuTrigger>

<DropdownMenuContent

className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"

side={isMobile ? "bottom" : "right"}

align="end"

sideOffset={4}

>

<DropdownMenuLabel className="p-0 font-normal">

<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">

<Avatar className="h-8 w-8 rounded-lg">

<AvatarImage src={user.avatar} alt={user.name} />

<AvatarFallback className="rounded-lg">

{user.name.slice(0, 2).toUpperCase()}

</AvatarFallback>

</Avatar>

<div className="grid flex-1 text-left text-sm leading-tight">

<span className="truncate font-semibold">{user.name}</span>

<span className="truncate text-xs">{user.email}</span>

</div>

</div>

</DropdownMenuLabel>

<DropdownMenuSeparator />

<DropdownMenuGroup>

<DropdownMenuItem>

<BadgeCheck />

Account

</DropdownMenuItem>

</DropdownMenuGroup>

<DropdownMenuSeparator />

<DropdownMenuItem onClick={handleSignOut}>

<LogOut />

Sign out

</DropdownMenuItem>

</DropdownMenuContent>

</DropdownMenu>

</SidebarMenuItem>

</SidebarMenu>

)

}