import React, { ReactNode } from 'react';
import ProgressDots from './ProgressDots';
import styles from './OnboardingLayout.module.css';

interface OnboardingLayoutProps {
  title: string;
  image?: string;
  description?: string;
  currentStep: number;
  totalSteps: number;
  children?: ReactNode;
  primaryButtonText: string;
  secondaryButtonText?: string;
  onPrimaryClick: () => void;
  onSecondaryClick?: () => void;
}

const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({
  title,
  image,
  description,
  currentStep,
  totalSteps,
  children,
  primaryButtonText,
  secondaryButtonText,
  onPrimaryClick,
  onSecondaryClick
}) => {
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <h1 className={styles.title}>{title}</h1>
        
        {image && (
          <div className={styles.imageContainer}>
            <img src={image} alt="" className={styles.image} />
          </div>
        )}
        
        {description && (
          <p className={styles.description}>{description}</p>
        )}
        
        {children && (
          <div className={styles.childrenContainer}>
            {children}
          </div>
        )}
        
        <ProgressDots currentStep={currentStep} totalSteps={totalSteps} />
        
        <div className={styles.buttonsContainer}>
          <button 
            className={styles.primaryButton}
            onClick={onPrimaryClick}
          >
            {primaryButtonText}
          </button>
          
          {secondaryButtonText && onSecondaryClick && (
            <button 
              className={styles.secondaryButton}
              onClick={onSecondaryClick}
            >
              {secondaryButtonText}
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default OnboardingLayout;