import React from 'react';
import { useNavigate } from 'react-router-dom';
import OnboardingLayout from '../../components/shared/OnboardingLayout';
import styles from './OnboardingStickerPacks.module.css';

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

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

  return (
    <OnboardingLayout
      title="Создавайте стикерпаки"
      currentStep={3}
      totalSteps={3}
      primaryButtonText="Начать"
      secondaryButtonText="Пропустить"
      onPrimaryClick={handleStart}
      onSecondaryClick={handleStart}
    >
      <div className={styles.stepsContainer}>
        <div className={styles.step}>
          <div className={styles.stepNumber}>1</div>
          <div className={styles.stepContent}>
            <h3 className={styles.stepTitle}>Выберите стикеры</h3>
            <p className={styles.stepDescription}>Отберите лучшие стикеры из вашей галереи</p>
          </div>
        </div>

        <div className={styles.step}>
          <div className={styles.stepNumber}>2</div>
          <div className={styles.stepContent}>
            <h3 className={styles.stepTitle}>Организуйте набор</h3>
            <p className={styles.stepDescription}>Расположите стикеры в нужном порядке</p>
          </div>
        </div>

        <div className={styles.step}>
          <div className={styles.stepNumber}>3</div>
          <div className={styles.stepContent}>
            <h3 className={styles.stepTitle}>Опубликуйте</h3>
            <p className={styles.stepDescription}>Создайте стикерпак в Telegram одним нажатием</p>
          </div>
        </div>
      </div>
    </OnboardingLayout>
  );
};

export default OnboardingStickerPacks;
