import { getServerSession } from "next-auth";
import { Store, User2 } from "lucide-react";
import Link from "next/link";

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import SignOut from "./sign-out"

export async function UserNav() {

  const session = await getServerSession();
  const email = session?.user?.email;
  const name = session?.user?.name;


  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
          <Avatar className="h-8 w-8 flex items-center justify-center">
            {/*<AvatarImage src="/avatars/01.png" alt="@shadcn" />*/}
            <User2 size={20} />
            {/*<AvatarFallback>{name?.[0]}</AvatarFallback>*/}
          </Avatar>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="end" forceMount>
        <DropdownMenuLabel className="font-normal">
          <div className="flex flex-col space-y-1">
            <p className="text-sm font-medium leading-none">{name}</p>
            <p className="text-xs leading-none text-muted-foreground">
              {email}
            </p>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <Button
            asChild
            variant={"ghost"}
            size={"sm"}
            className="relative w-[100%] pl-0 font-normal"
          >
            <Link href="/stores">
              <div className="absolute inline-flex left-2 items-center">
                <Store className="mr-2 h-4 w-4" />
                Boutiques
              </div>
            </Link>
          </Button>
        </DropdownMenuGroup>
        {/*<Button
            asChild
            variant={"ghost"}
            size={"sm"}
            className="relative w-[100%] pl-0 font-normal"
          >
            <Link href="/profile">
              <div className="absolute inline-flex left-2 items-center">
                <User className="mr-2 h-4 w-4" />
                Profile
              </div>
            </Link>
          </Button>
          {/*<DropdownMenuItem>
            <CreditCard className="mr-2 h-4 w-4" />
            Abonnement
          </DropdownMenuItem>
          <Button
            asChild
            variant={"ghost"}
            size={"sm"}
            className="relative w-[100%] pl-0 font-normal"
          >
            <Link href="/settings">
              <div className="absolute inline-flex left-2 items-center">
                <Settings className="mr-2 h-4 w-4" />
                Paramètres
              </div>
            </Link>
          </Button>*/}
        <DropdownMenuSeparator />
        <div className="w-full text-center">
          <SignOut />
        </div>
      </DropdownMenuContent>
    </DropdownMenu >
  )
}