'use client';

import { Button, Container, Group, Text, Title } from '@pikku/mantine/core';
import { DEFAULT_LOCALE } from '@/config';
import { useI18n } from '@/context/i18n-provider';
import { useParams, useRouter } from '@/framework/navigation';
import classes from './NotFoundTitle.module.css';

export function NotFoundTitle() {
  const t = useI18n();
  const router = useRouter();
  const { lang } = useParams<{ lang?: string }>();

  const handleGoHome = () => {
    router.push(lang ? `/${lang}` : `/${DEFAULT_LOCALE}`);
  };

  return (
    <Container className={classes.root}>
      <div className={classes.label}>404</div>
      <Title className={classes.title}>{t('notfound.title')}</Title>
      <Text c="dimmed" size="lg" ta="center" className={classes.description}>
        {t('notfound.description')}
      </Text>
      <Group justify="center">
        <Button variant="subtle" size="md" onClick={handleGoHome}>
          {t('notfound.cta')}
        </Button>
      </Group>
    </Container>
  );
}