import { AppLogo } from '@/components/layout/app-logo';
import { home } from '@/routes';
import { Link } from '@inertiajs/react';
import { type PropsWithChildren } from 'react';

interface AuthDefaultLayoutProps {
  title?: string;
  description?: string;
}

export default function AuthDefaultLayout({
  children,
  title,
  description,
}: PropsWithChildren<AuthDefaultLayoutProps>) {
  return (
    <div className="relative overflow-x-hidden bg-background-layer font-lexend backdrop-blur-lg">
      <div className="relative z-10 flex min-h-dvh flex-col items-center justify-center p-0 sm:p-4 lg:gap-12 lg:p-8 dark:bg-accent-foreground/70">
        <div className="flex min-h-dvh w-full max-w-xl flex-col items-center justify-center overflow-y-auto rounded-none border border-black/10 bg-white/70 px-4 py-10 backdrop-blur-xl sm:rounded-2xl lg:h-full lg:min-h-0 lg:p-8 dark:border-white/10 dark:bg-black/40">
          <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[432px]">
            <Link
              href={home()}
              className="relative z-20 flex items-center justify-center lg:hidden"
            >
              <AppLogo />
            </Link>
            <div className="flex flex-col items-start gap-2 text-left sm:items-center sm:text-center">
              <Link
                href={home()}
                className="relative z-20 mb-12 hidden items-center text-lg font-medium lg:flex"
              >
                <AppLogo />
              </Link>
              <h3 className="mb-1 bg-clip-text text-center text-2xl font-medium text-foreground">
                {title}
              </h3>
              <p className="text-sm text-balance text-muted-foreground">
                {description}
              </p>
            </div>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}