import { Head, Link } from '@inertiajs/react'
import Layout from './Layout'
export default function Forbidden({ auth }) {
return (
<Layout user={auth?.user}>
<Head title="403 - Forbidden" />
<div className="min-h-[70vh] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full text-center">
<div className="text-6xl font-extrabold text-red-600 mb-4">403</div>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Access Denied</h1>
<p className="text-gray-600 mb-8">
Sorry, you don't have permission to access this page.
</p>
<div className="flex justify-center space-x-4">
<Link
href="/"
className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Go to home page
</Link>
{auth?.user ? (
<Link
href="/images"
className="inline-flex items-center px-4 py-2 border border-gray-300 text-base font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
My Images
</Link>
) : (
<Link
href="/login"
className="inline-flex items-center px-4 py-2 border border-gray-300 text-base font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Log in
</Link>
)}
</div>
</div>
</div>
</Layout>
)
}