/*
 * 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 } from 'react-native';
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
 */
interface SettingsHeaderProps {
  title: string;
}

/**
 * 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 }) => {
  return (
    <View style={styles.container}>
      <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.lg,
    borderBottomColor: theme.colors.border,
    borderBottomWidth: 1,
  },
  
  // Title text styling
  title: {
    fontSize: theme.typography.fontSize.displayMedium,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
  },
});

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