/** Common screen chrome: gradient header with back button + title. */
import React from 'react';
import {StatusBar, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/Ionicons';
import {COLORS} from '../theme/colors';
import {SPACING} from '../theme/spacing';

interface Props {
  title: string;
  onBack?: () => void;
  right?: React.ReactNode;
  subtitle?: string;
}

export function ScreenHeader({title, onBack, right, subtitle}: Props): React.JSX.Element {
  return (
    <SafeAreaView edges={['top']} style={styles.safe}>
      <StatusBar barStyle="light-content" backgroundColor={COLORS.darkBg} />
      <View style={styles.row}>
        {onBack ? (
          <TouchableOpacity onPress={onBack} hitSlop={10} style={styles.back}>
            <Icon name="chevron-back" size={24} color={COLORS.white} />
          </TouchableOpacity>
        ) : (
          <View style={{width: 40}} />
        )}
        <View style={{flex: 1}}>
          <Text style={styles.title} numberOfLines={1}>
            {title}
          </Text>
          {subtitle ? (
            <Text style={styles.subtitle} numberOfLines={1}>
              {subtitle}
            </Text>
          ) : null}
        </View>
        {right ?? <View style={{width: 40}} />}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {backgroundColor: COLORS.darkBg},
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: SPACING.m,
    paddingBottom: SPACING.m,
    gap: 4,
  },
  back: {width: 40, height: 40, alignItems: 'flex-start', justifyContent: 'center'},
  title: {color: COLORS.white, fontSize: 17, fontWeight: '800', textAlign: 'center'},
  subtitle: {color: COLORS.secondaryText, fontSize: 11, textAlign: 'center', marginTop: 1},
});