import ApplicationLogo from '@/Components/ApplicationLogo';
import { Link } from '@inertiajs/react';
import { PropsWithChildren } from 'react';

export default function Guest({ children }: PropsWithChildren) {
    return (
        <div className="flex min-h-screen flex-col bg-slate-100 px-4 pb-12 pt-10 sm:items-center sm:justify-center sm:px-6 sm:pb-10 sm:pt-8">
            <div className="flex shrink-0 justify-center">
                <Link
                    href={route('login')}
                    className="rounded-md p-1 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    aria-label="ログインへ"
                >
                    <ApplicationLogo
                        alt=""
                        className="h-14 w-auto max-w-[12rem] sm:h-16 sm:max-w-[14rem]"
                    />
                </Link>
            </div>

            <div className="mt-6 w-full max-w-md sm:mx-auto">
                <div className="overflow-hidden rounded-2xl bg-white px-4 py-7 shadow-md sm:px-7">
                    {children}
                </div>
            </div>
        </div>
    );
}