import {Link} from 'react-router-dom';
import {useTranslation} from 'react-i18next';

import {Button} from '@/components/ui/button';
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
import useSession from '../hooks/useSession.js';

export default function NotFoundPage() {
    const {t} = useTranslation();
    const {active} = useSession();

    return (
        <div className="w-full max-w-3xl mx-auto p-4 md:p-8">
            <Card>
                <CardHeader>
                    <CardTitle className="text-3xl font-bold tracking-tight">{t('NOT_FOUND.TITLE')}</CardTitle>
                </CardHeader>
                <CardContent>
                    <Button asChild>
                        {active ? <Link to="/dashboard">{t('NAV.TO_DASHBOARD')}</Link> : <Link to="/">{t('PROFILE.TO_START')}</Link>}
                    </Button>
                </CardContent>
            </Card>
        </div>
    );
}