import { type ReactNode } from 'react';

interface AuthCardProps {
    title: string;
    description?: ReactNode;
    children: ReactNode;
}

export function AuthCard({ title, description, children }: AuthCardProps) {
    return (
        <div className="mt-7 bg-white rounded-sm shadow-sm dark:bg-bgdark">
            <div className="p-4 sm:p-7">
                <div className="text-center">
                    <h1 className="block text-2xl font-bold text-gray-800 dark:text-white">{title}</h1>
                    {description && <p className="mt-3 text-sm text-gray-600 dark:text-white/70">{description}</p>}
                </div>
                <div className="mt-5">{children}</div>
            </div>
        </div>
    );
}