/*
 * File: SettingsHeader.tsx
 * Description: Header component for the settings screen
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
import { theme } from '../../../theme/theme';

/**
 * SettingsHeaderProps Interface
 * 
 * Purpose: Defines the props required by the SettingsHeader component
 * 
 * Props:
 * - title: Title text to display in the header
 * - showBackButton: Whether to show the back button (optional)
 * - onBackPress: Function to call when back button is pressed (optional)
 */
interface SettingsHeaderProps {
  title: string;
  showBackButton?: boolean;
  onBackPress?: () => void;
}

/**
 * SettingsHeader Component
 * 
 * Purpose: Displays the header for the settings screen
 * 
 * Features:
 * - Clean, minimal header design
 * - Consistent with app theme
 * - Proper spacing and typography
 */
export const SettingsHeader: React.FC<SettingsHeaderProps> = ({ 
  title, 
  showBackButton = false, 
  onBackPress 
}) => {
  return (
    <View style={styles.container}>
      {showBackButton && onBackPress && (
        <TouchableOpacity 
          style={styles.backButton}
          onPress={onBackPress}
          activeOpacity={0.7}
        >
          <Icon name="chevron-left" size={24} color={theme.colors.primary} />
        </TouchableOpacity>
      )}
      <Text style={styles.title}>{title}</Text>
    </View>
  );
};

// ============================================================================
// STYLES SECTION
// ============================================================================

const styles = StyleSheet.create({
  // Main container for the header
  container: {
    backgroundColor: theme.colors.background,
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.md,
    borderBottomColor: theme.colors.border,
    borderBottomWidth: 1,
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: theme.spacing.md,
  },
  
  // Back button styling
  backButton: {
    marginRight: theme.spacing.md,
    padding: theme.spacing.xs,
  },
  
  // Title text styling
  title: {
    fontSize: theme.typography.fontSize.displayMedium,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    flex: 1,
  },
});

/*
 * End of File: SettingsHeader.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */ 