import type { Metadata } from 'next'
import { useTranslations } from 'next-intl'
import { getTranslations } from 'next-intl/server'

import { Button, Typography } from '@/components/atoms'

import { PageLayout } from '@/components/templates'

const { Title, Paragraph, Link } = Typography

export async function generateMetadata(): Promise<Metadata> {
	const t = await getTranslations('not-found')

	return {
		title: t('seo.title'),
		description: t('seo.description')
	}
}

export default function NotFound() {
	const t = useTranslations()

	return (
		<PageLayout className='bg-[url(/images/bg/404.bg.png)] dark:bg-[url(/images/bg/404.bg.dark.png)]'>
			<Title level={2} className='mb-1.5'>
				{t('not-found.title')}
			</Title>
			<Paragraph className='mb-6'>{t('not-found.description')}</Paragraph>
			<Button asChild>
				<Link href='/'>{t('back-to-home')}</Link>
			</Button>
		</PageLayout>
	)
}
