import BackButton from '@/Components/BackButton';
import { PropsWithChildren } from 'react';

export default function Guest({
    children,
    backLink,
}: PropsWithChildren & { backLink?: string }) {
    return (
        <div
            className={`bg-cultured-grey sm:min-h-screen sm:bg-guest sm:bg-cover sm:bg-center sm:bg-no-repeat`}
        >
            <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div className="flex h-16 justify-between">
                    <div className="flex">
                        <div className="flex shrink-0 items-center">
                            {backLink ? <BackButton href={backLink} /> : null}
                        </div>
                    </div>

                    <div className="-me-2 flex items-center"></div>
                </div>
            </div>
            <div className="flex min-h-[calc(100vh-4rem)] flex-col items-center pt-6 sm:justify-center sm:pt-0">
                <div className="mt-6 w-full overflow-hidden px-6 py-4 sm:max-w-md sm:rounded-xl sm:bg-cultured-grey sm:p-12 sm:shadow-md">
                    {children}
                </div>
            </div>
        </div>
    );
}