import React from 'react';
import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar } from 'react-native';
import { OnboardingColors } from '@/constants/OnboardingTheme';
import { SerifText } from './SerifText';
import { NextButton } from './NextButton';

interface OnboardingLayoutProps {
  children: React.ReactNode;
  onSkip?: () => void;
  onNext?: () => void;
  nextEnabled?: boolean;
  showNextButton?: boolean;
}

export function OnboardingLayout({ 
  children, 
  onSkip, 
  onNext, 
  nextEnabled = true,
  showNextButton = true 
}: OnboardingLayoutProps) {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.safeArea}>
        <View style={styles.header}>
          <View style={styles.spacer} />
          {onSkip && (
            <TouchableOpacity onPress={onSkip} style={styles.skipButton}>
              <SerifText style={styles.skipText}>Skip {'->'}</SerifText>
            </TouchableOpacity>
          )}
        </View>
        
        <View style={styles.content}>
          {children}
        </View>

        <View style={styles.footer}>
          {showNextButton && onNext && (
            <NextButton onPress={onNext} disabled={!nextEnabled} />
          )}
        </View>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: OnboardingColors.background,
  },
  safeArea: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 24,
    paddingVertical: 12,
  },
  spacer: {
    width: 60, // Balance the skip button width approximately
  },
  skipButton: {
    padding: 8,
  },
  skipText: {
    fontSize: 16,
    color: OnboardingColors.textPrimary,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 24,
  },
  footer: {
    alignItems: 'center',
    paddingBottom: 40,
    minHeight: 100, // Reserve space for button
  },
});