import React from 'react';
import Link from 'next/link';
import styles from './styles.module.css';

export const Page404 = () => {
    return (
        <main className={`${styles.main} md:${styles.main_md}`}>
            <div className={styles.container}>
                <FrownIcon className={`${styles.icon} dark:${styles.icon_dark}`} />
                <h1 className={`${styles.title} sm:${styles.title_sm}`}>Page Not Found</h1>
                <p className={`${styles.description} dark:${styles.description_dark}`}>
                    The page you're looking for doesn't exist. Please check the URL or return to the homepage.
                </p>
                <Link
                    className={`${styles.link} hover:${styles.link_hover} focus-visible:${styles.link_focus} disabled:${styles.link_disabled} dark:${styles.link_dark} dark:hover:${styles.link_dark_hover} dark:focus-visible:${styles.link_dark_focus}`}
                    href='/'
                >
                    Go to Homepage
                </Link>
            </div>
        </main>
    );
}

function FrownIcon(props) {
    return (
        <svg
            {...props}
            xmlns='http://www.w3.org/2000/svg'
            width='24'
            height='24'
            viewBox='0 0 24 24'
            fill='none'
            stroke='currentColor'
            strokeWidth='2'
            strokeLinecap='round'
            strokeLinejoin='round'
        >
            <circle cx='12' cy='12' r='10' />
            <path d='M16 16s-1.5-2-4-2-4 2-4 2' />
            <line x1='9' x2='9.01' y1='9' y2='9' />
            <line x1='15' x2='15.01' y1='9' y2='9' />
        </svg>
    );
}