import { ReactNode } from 'react';
import { ScrollView, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useColors } from '../../lib/theme';
import { SlideProgress } from './SlideProgress';

/**
 * Layout-Wrapper für alle Onboarding-Slides.
 *
 *   ┌──────────────────────────────┐
 *   │  [Top-Padding + SafeArea]     │
 *   │  ────── Progress-Bar ─────    │
 *   │                               │
 *   │  <children — ScrollView>      │
 *   │                               │
 *   │  ───── CTABar (sticky) ─────  │
 *   └──────────────────────────────┘
 *
 * `cta` wird IM Shell gerendert (sticky-bottom + SafeArea). Slides müssen
 * ihre Inhalte als `children` reinpacken (= scrollbarer Content-Bereich).
 */
export function OnboardingShell({
  current,
  total,
  children,
  cta,
}: {
  current: number;
  total: number;
  children: ReactNode;
  cta: ReactNode;
}) {
  const colors = useColors();
  const insets = useSafeAreaInsets();

  return (
    <View style={{ flex: 1, backgroundColor: colors.bg }}>
      <View
        style={{
          paddingTop: insets.top + 12,
          paddingHorizontal: 20,
          paddingBottom: 8,
        }}
      >
        <SlideProgress current={current} total={total} />
      </View>

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{
          paddingHorizontal: 20,
          paddingTop: 12,
          paddingBottom: 16,
          flexGrow: 1,
        }}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
      >
        {children}
      </ScrollView>

      {cta}
    </View>
  );
}