import { redirect } from "next/navigation"

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { auth } from "@/lib/auth"
import { SIGN_IN_URL } from "@/lib/constants"

import { SignOut } from "../auth/logout"
import { SidebarTrigger } from "../ui/sidebar"
import AddMenu from "./addMenu"

export default async function Navbar() {
  const session = await auth()

  if (!session) redirect(SIGN_IN_URL)

  return (
    <nav className="flex items-center justify-between border-b p-4">
      <SidebarTrigger />
      <div className="flex items-center gap-4">
        <AddMenu />
        <div className="flex items-center gap-4">
          <DropdownMenu>
            <DropdownMenuTrigger>
              <div className="flex cursor-pointer items-center space-x-3">
                {session && (
                  <div className="flex flex-col items-end">
                    <span className="text-sm font-medium text-gray-900">
                      {session.user?.name}
                    </span>
                    <span className="text-sm text-gray-600">
                      {session.user?.email}
                    </span>
                  </div>
                )}
                <div className="relative inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-amber-400">
                  {session && (
                    <span className="font-medium text-white">
                      {session.user?.name?.[0]?.toUpperCase()}
                    </span>
                  )}
                </div>
              </div>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuLabel>My Account</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem variant="destructive">
                <SignOut />
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </nav>
  )
}
