import Image from "next/image";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { NavigationLinks } from "@/components/common/NavigationLinks";

export default function PanelLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  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="/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>
  );
}
