"use client"

/*
 * File: OnboardingContainer.tsx
 * Description: Shared container component for onboarding screens with gradient background.
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import type React from "react"
import { View, StyleSheet, TouchableWithoutFeedback, Keyboard, ScrollView } from "react-native"
import LinearGradient from "react-native-linear-gradient"
import { Colors, Spacing } from "../../../../shared/src/theme"
import BackButton from "./BackButton"
import AngledGradient from "../../../../shared/src/components/Gradient/AngledGradient"

interface OnboardingContainerProps {
  children: React.ReactNode
  onBack: () => void
  showBackButton?: boolean
}

const OnboardingContainer: React.FC<OnboardingContainerProps> = ({ children, onBack, showBackButton = true }) => {
  return (
    <TouchableWithoutFeedback style={{flex:1}} onPress={Keyboard.dismiss}>
   <AngledGradient>
        {showBackButton && (
          <View style={styles.header}>
            <BackButton onPress={onBack} />
          </View>
        )}
        <ScrollView>
        <View style={styles.content}>{children}</View>
        </ScrollView>
        </AngledGradient>
    </TouchableWithoutFeedback>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    paddingTop: Spacing.md,
    paddingHorizontal: Spacing.lg,
    paddingBottom: Spacing.md,
  },
  content: {
    flex: 1,
    paddingHorizontal: Spacing.lg,
    justifyContent: 'center',
  },
})

export default OnboardingContainer

/*
 * End of File: OnboardingContainer.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */