import type { ReactNode } from "react";
import { GalleryVerticalEnd } from "lucide-react";
import { PROJECT_CONFIG } from "@/config/project-config";

interface LayoutProps {
  readonly children: ReactNode;
}

import { prisma } from "@/lib/prisma";

export default async function Layout({ children }: LayoutProps) {
  let schoolName = PROJECT_CONFIG.schoolName;
  let description = PROJECT_CONFIG.description;

  try {
    const setting = await prisma.settingSekolah.findFirst();
    if (setting) {
      schoolName = setting.namaSekolah;
      description = `Platform Manajemen Pendidikan ${setting.namaSekolah}`;
    }
  } catch (error) {
    console.error("Error fetching school setting:", error);
  }

  return (
    <main>
      <div className="relative container h-[800px] h-dvh flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
        <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
          <div className="bg-primary-900 absolute inset-0" />
          {/* Pattern or Image if desired */}
          <div className="from-primary-900 absolute inset-0 bg-gradient-to-br to-indigo-900 opacity-90" />

          <div className="relative z-20 flex items-center text-lg font-medium">
            <div className="mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white/10 backdrop-blur">
              <GalleryVerticalEnd className="h-5 w-5" />
            </div>
            {PROJECT_CONFIG.name}
          </div>

          <div className="relative z-20 mt-auto">
            <blockquote className="space-y-2">
              <p className="text-2xl font-bold">{schoolName}</p>
              <footer className="text-primary-100 text-sm">{description}</footer>
            </blockquote>
            <div className="text-primary-200 mt-8 text-xs">
              <p>{PROJECT_CONFIG.copyright}</p>
              <p>Version {PROJECT_CONFIG.version}</p>
            </div>
          </div>
        </div>
        <div className="lg:p-8">
          <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">{children}</div>
        </div>
      </div>
    </main>
  );
}