"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 } from "react-native"
import LinearGradient from "react-native-linear-gradient"
import { Colors, Spacing } from "../../../../shared/src/theme"
import BackButton from "./BackButton"

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

const OnboardingContainer: React.FC<OnboardingContainerProps> = ({ children, onBack, showBackButton = true }) => {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <LinearGradient
        colors={Colors.backgroundGradient}
        style={styles.container}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      >
        {showBackButton && (
          <View style={styles.header}>
            <BackButton onPress={onBack} />
          </View>
        )}
        <View style={styles.content}>{children}</View>
      </LinearGradient>
    </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.
 */
