import { PropsWithChildren, ReactNode } from 'react';
import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
import { DriverFlowNav } from './driver-flow-nav';
import { driverTheme } from '../src/lib/driver-ui';

type DriverShellProps = PropsWithChildren<{
  title: string;
  subtitle: string;
  eyebrow?: string;
  afterHero?: ReactNode;
}>;

export function DriverShell({ title, subtitle, eyebrow = 'Chego Driver', afterHero, children }: DriverShellProps) {
  return (
    <SafeAreaView style={styles.safeArea}>
      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
        <DriverFlowNav />
        <View style={styles.hero}>
          <Text style={styles.eyebrow}>{eyebrow}</Text>
          <Text style={styles.title}>{title}</Text>
          <Text style={styles.subtitle}>{subtitle}</Text>
          {afterHero}
        </View>
        {children}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: { flex: 1, backgroundColor: driverTheme.background },
  content: { padding: 16, gap: 14, paddingBottom: 24 },
  hero: {
    borderRadius: 28,
    paddingHorizontal: 18,
    paddingVertical: 18,
    backgroundColor: driverTheme.panelStrong,
    borderWidth: 1,
    borderColor: driverTheme.border,
  },
  eyebrow: {
    fontSize: 11,
    letterSpacing: 2.6,
    textTransform: 'uppercase',
    color: '#FDBA74',
    fontWeight: '800',
  },
  title: {
    marginTop: 10,
    fontSize: 28,
    lineHeight: 32,
    color: driverTheme.text,
    fontWeight: '900',
  },
  subtitle: {
    marginTop: 10,
    fontSize: 14,
    lineHeight: 21,
    color: '#CBD5E1',
    fontWeight: '600',
  },
});