'use client';
import { useTranslations } from 'next-intl';
import { useRouter } from '@/i18n/navigation';
import { useParams } from 'next/navigation';
import LocaleSwitcherClient from '@/components/LocaleSwitcherClient';

export default function HomePage() {
    const t = useTranslations('Index');
    const n = useTranslations('Index.navigation');

    const router = useRouter();
    const params = useParams();

    const handleNavigation = (path: string) => {
        console.log('Navigating to /about');
        router.push(path);
    };

    return (
        <main>
            <h1>{t('title')}</h1>
            <p>{t('description')}</p>
            <p>{n('title')} : {params?.locale || 'tr'}</p>
            <div className='flex flex-col gap-2'>
                <LocaleSwitcherClient />
                <button onClick={() => handleNavigation('/about')}>{n('about')}</button>
                <button onClick={() => handleNavigation('/home')}>{n('home')}</button>
                <button onClick={() => handleNavigation('/login')}>{n('login')}</button>
                <button onClick={() => handleNavigation('/select')}>{n('select')}</button>
            </div>
        </main>
    );
}