import Image from "next/image";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { NavigationLinks } from "@/components/common/NavigationLinks";
import { url as gravatarUrl } from 'gravatar';
import { getServerSession } from "next-auth";

export default async function PanelLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession();

  return (
    <main className="flex flex-col h-[100vh]">
      <div className="p-4 flex justify-between items-center">
        <span className="flex gap-4 items-center">
          <Image
            height={48}
            width={160}
            alt="Revolt"
            className="invert"
            src="https://app.revolt.chat/assets/wide.svg"
          />
          <h1 className="text-3xl font-semibold">Admin Panel</h1>
        </span>
        <Avatar>
          <AvatarImage
            src={
              session?.user?.email
                ? gravatarUrl(
                  session.user.email,
                  {
                    size: '40',
                    default: 'https://admin.revolt.chat/honse.png',
                  },
                  true,
                )
                : '/honse.png'
            }
          />
          <AvatarFallback>i</AvatarFallback>
        </Avatar>
      </div>
      <div className="flex">
        <div className="pt-2 pl-4 pr-0 gap-2 flex flex-col">
          <NavigationLinks />
        </div>
        <div className="flex-grow overflow-hidden p-2 pr-4">{children}</div>
      </div>
    </main>
  );
}
