import React from 'react'
import sitemap from '@/app/sitemap'
import {SimpleLayout} from '@/components/layouts/SimpleLayout'
import {Card} from '@/components/ui/Card'

const meta = {
    title: 'Ryan Freeman - Software engineer based in Dublin, Ireland.',
    heading: 'Sorry, the page you were looking for could not be found.',
    description: 'The page you requested may have been removed, renamed, or never existed. Verify the URL is correct or check the sitemap below.',
    type: 'website',
    alternates: {
        canonical: '/'
    }
}

export let metadata: {
    [p: string]: string | Object
    heading: string
    description: string
    title: string
    type: string
    openGraph: {
        images: string | Object
        description: string
        title: string
        type: string
    }
}

export default async function NotFound() {
    const pages = await sitemap()

    return (
        <SimpleLayout heading={meta.heading}
                      description={meta.description}
                      gradient="bg-gradient-to-r from-pink-500 to-violet-500"
                      displaySocials={false}>
            <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none">
                <div className="max-w-3xl space-y-16 mt-6">
                    {
                        pages.map(({url: url}, i) => {
                            return (
                                <article key={i}>
                                    <Card variant="inline">
                                        <Card.Title href={url}>
                                            {url}
                                        </Card.Title>
                                    </Card>
                                </article>
                            )
                        })
                    }
                </div>
            </div>
        </SimpleLayout>
    )
}