import * as React from "react";
import { cn } from "@/lib/utils";

export type AuthPageLayoutProps = {
  logo?: React.ReactNode;
  title?: string;
  subtitle?: string;
  wide?: boolean;
  className?: string;
  children: React.ReactNode;
};

export function AuthPageLayout({
  logo,
  title,
  subtitle,
  wide = false,
  className,
  children,
}: AuthPageLayoutProps) {
  return (
    <div
      className={cn(
        "relative flex min-h-screen w-full flex-col items-center justify-center px-4 py-10 font-sans sm:px-10 sm:py-16",
        className,
      )}
    >
      {logo && (
        <div className="absolute top-8 left-1/2 -translate-x-1/2">{logo}</div>
      )}

      <div
        className={cn(
          "flex w-full flex-col items-center gap-10",
          wide ? "max-w-full" : "max-w-[581px]",
        )}
      >
        {(title || subtitle) && (
          <div className="flex w-full max-w-[320px] flex-col items-center gap-2 text-center">
            {title && (
              <h1 className="m-0 text-[30px] font-semibold leading-9 text-card-foreground">
                {title}
              </h1>
            )}
            {subtitle && (
              <p className="m-0 text-sm font-normal leading-5 text-muted-foreground">
                {subtitle}
              </p>
            )}
          </div>
        )}

        <div className={cn("w-full", wide ? "max-w-full" : "max-w-[320px]")}>
          {children}
        </div>
      </div>
    </div>
  );
}