import { Head } from '@inertiajs/react';
import { PageProps } from '@/types';
import Guest from '@/Layouts/GuestLayout';
import Authenticated from '@/Layouts/AuthenticatedLayout';

const Help = ({ auth }: PageProps) => {
    const renderAboutContent = () => (
        <div id="Help" className="p-6">
            <video controls>
                <source src="assets/media/sample-video.mp4" type="video/mp4" />
                Browser does not support the video tag.
            </video>
        </div>
    )
    
    return (
        <>
            <Head title="Help" />
            <div>
                {auth.user ? (
                    <Authenticated
                        user={auth.user}
                    >
                        {renderAboutContent()}
                    </Authenticated>
                ) : (
                    <>
                        <Guest>
                            {renderAboutContent()}
                        </Guest>
                    </>
                )}
            </div>
        </>
    );
}
 
export default Help;