import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import AppLayout from '@/layouts/app-layout'
import { type BreadcrumbItem } from '@/types'
import type { ReactNode } from 'react'
import { Head } from '@inertiajs/react'
import { dashboard } from '@/routes'

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Error',
        href: '#',
    },
]

function ErrorPage() {
    return (
        <>
            <Head title="Error" />

            <div className="flex h-full flex-1 items-center justify-center p-6">
                <Card className="max-w-md w-full text-center">
                    <CardContent className="space-y-4">
                        <h1 className="text-4xl font-bold text-red-600">Oops!</h1>
                        <p className="text-lg text-muted-foreground">
                            Something went wrong. Please try again later.
                        </p>
                        <Button
                            onClick={() => {
                                window.location.href = dashboard().url
                            }}
                            variant="default"
                        >
                            Go to Dashboard
                        </Button>
                    </CardContent>
                </Card>
            </div>
        </>
    )
}

// Wrap in AppLayout
ErrorPage.layout = (page: ReactNode) => (
    <AppLayout breadcrumbs={breadcrumbs}>{page}</AppLayout>
)

export default ErrorPage
