'use client';

import { useTranslations } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ArrowRight } from 'lucide-react';
import styles from './CTA.module.css';

export default function CTA() {
    const t = useTranslations('HomePage');
    const router = useRouter();

    return (
        <section className={styles.section}>
            <div className={styles.container}>
                <div className={styles.content}>
                    <h2 className={styles.title}>{t('ctaTitle')}</h2>
                    <p className={styles.desc}>{t('ctaDesc')}</p>
                    <button 
                        className={styles.button}
                        onClick={() => router.push('/docs')}
                    >
                        {t('ctaButton')}
                        <ArrowRight size={20} />
                    </button>
                </div>
            </div>
        </section>
    );
}

