import React from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './TermsAndConditions.module.css';
import { images } from '../../assets';

const TermsAndConditions: React.FC = () => {
  const navigate = useNavigate();

  const handleAccept = () => {
    // Устанавливаем флаги, что пользователь видел онбординг и принял условия
    localStorage.setItem('hasSeenOnboarding', 'true');
    localStorage.setItem('hasAcceptedTerms', 'true');
    // Переходим на главный экран
    navigate('/');
  };

  const handleDecline = () => {
    // Закрываем приложение
    if (window.Telegram?.WebApp?.close) {
      window.Telegram.WebApp.close();
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.iconContainer}>
          <img src={images.shieldIcon} alt="" className={styles.icon} />
        </div>
        
        <h1 className={styles.title}>Условия и Конфиденциальность</h1>
        
        <p className={styles.description}>
          Продолжая использовать это приложение, вы соглашаетесь с нашими Условиями использования и Политикой конфиденциальности.
        </p>
        
        <div className={styles.links}>
          <a 
            href="https://telegra.ph/Polzovatelskoe-soglashenie-03-19-13" 
            className={styles.link} 
            target="_blank" 
            rel="noopener noreferrer"
          >
            Условия использования
          </a>
          <a 
            href="https://telegra.ph/Politika-konfidencialnosti-03-19-10" 
            className={styles.link} 
            target="_blank" 
            rel="noopener noreferrer"
          >
            Политика конфиденциальности
          </a>
        </div>
        
        <div className={styles.buttonsContainer}>
          <button 
            className={styles.primaryButton}
            onClick={handleAccept}
          >
            Принять
          </button>
          <button 
            className={styles.secondaryButton}
            onClick={handleDecline}
          >
            Отклонить
          </button>
        </div>
      </div>
    </div>
  );
};

export default TermsAndConditions;
