import React from "react";
import Container from "@/components/elements/Container";
import { cn } from "@/lib/utils";

type AuthPageLayoutProps = {
  children: React.ReactNode;
  className?: string;
};

export function AuthPageContent({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "flex w-full flex-1 flex-col items-center justify-center",
        className
      )}
    >
      {children}
    </div>
  );
}

type AuthFormFooterProps = {
  children: React.ReactNode;
  onSkip?: () => void;
  skipDisabled?: boolean;
  className?: string;
};

export function AuthFormFooter({
  children,
  onSkip,
  skipDisabled,
  className,
}: AuthFormFooterProps) {
  return (
    <div
      className={cn(
        "mt-auto flex w-full flex-col items-center gap-3 pt-6 pb-[max(2rem,env(safe-area-inset-bottom))]",
        className
      )}
    >
      {children}
      {onSkip && (
        <button
          type="button"
          onClick={onSkip}
          disabled={skipDisabled}
          className="text-sm text-gray-500 disabled:opacity-50"
        >
          رد کن
        </button>
      )}
    </div>
  );
}

function AuthPageLayout({ children, className }: AuthPageLayoutProps) {
  return (
    <Container>
      <div
        className={cn(
          "flex min-h-screen flex-col items-center p-4",
          className
        )}
      >
        {children}
      </div>
    </Container>
  );
}

export default AuthPageLayout;
