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

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

  const handleNext = () => {
    navigate('/onboarding/sticker-packs');
  };

  const handleSkip = () => {
    localStorage.setItem('hasSeenOnboarding', 'true');
    navigate('/');
  };

  return (
    <OnboardingLayout
      title="Как создать стикер"
      currentStep={2}
      totalSteps={3}
      primaryButtonText="Далее"
      secondaryButtonText="Пропустить"
      onPrimaryClick={handleNext}
      onSecondaryClick={handleSkip}
    >
      <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}>Дождитесь генерации и сохраните результат</p>
          </div>
        </div>
      </div>
    </OnboardingLayout>
  );
};

export default OnboardingHowTo;
