import type { ReactNode } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { colors, radius, space, text } from '@/theme/tokens';

type ScreenProps = {
  title: string;
  /** Kurzer Hinweis, was hier später entsteht – nur solange der Screen leer ist. */
  hint?: string;
  children?: ReactNode;
};

/**
 * Gemeinsames Grundgerüst aller Screens: Hintergrund, sichere Ränder, Titel.
 * In E1 tragen die drei Tabs damit nur ihren Namen – ab E3 kommt Inhalt in
 * `children`, der Rahmen bleibt.
 */
export function Screen({ title, hint, children }: ScreenProps) {
  return (
    <SafeAreaView style={styles.safe} edges={['top', 'left', 'right']}>
      <View style={styles.body}>
        <Text style={styles.title}>{title}</Text>
        {hint ? (
          <View style={styles.hintBox}>
            <Text style={styles.hint}>{hint}</Text>
          </View>
        ) : null}
        {children}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: colors.bg },
  body: { flex: 1, paddingHorizontal: space.xl, paddingTop: space.xl, gap: space.lg },
  title: { ...text.title, color: colors.txt },
  hintBox: {
    backgroundColor: colors.surface,
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: radius.md,
    padding: space.lg,
  },
  hint: { ...text.body, color: colors.mut, lineHeight: 21 },
});
