import type { ReactNode } from "react";

import { BrandLockup } from "@/components/Placeholders";

interface AuthCardProps {
    children: ReactNode;
    error?: string;
    footer?: ReactNode;
    notice?: string;
    subtitle: ReactNode;
    title: string;
}

const AuthCard = ({
    children,
    error,
    footer,
    notice,
    subtitle,
    title,
}: AuthCardProps) => {
    return (
        <main className="login-page min-vh-100 d-flex align-items-center justify-content-center">
            <section className="login-card">
                <BrandLockup />

                <div className="login-card__copy">
                    <h1>{title}</h1>
                    <p>{subtitle}</p>
                </div>

                {error ? (
                    <p className="alert alert-danger mb-4" role="alert">
                        {error}
                    </p>
                ) : null}

                {notice ? (
                    <p className="alert alert-success mb-4" role="status">
                        {notice}
                    </p>
                ) : null}

                {children}

                {footer ? <p className="login-card__footer">{footer}</p> : null}
            </section>
        </main>
    );
};

export default AuthCard;