/*
 * File: SettingsSectionComponent.tsx
 * Description: Settings section component displaying grouped settings items
 * 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';
import { SettingsSectionData } from '../../../shared/types';
import { SettingsItemComponent } from './SettingsItemComponent';

/**
 * SettingsSectionComponentProps Interface
 * 
 * Purpose: Defines the props required by the SettingsSectionComponent
 * 
 * Props:
 * - section: Settings section data to display
 */
interface SettingsSectionComponentProps {
  section: SettingsSectionData;
}

/**
 * SettingsSectionComponent Component
 * 
 * Purpose: Displays a settings section with grouped items
 * 
 * Features:
 * - Section title display
 * - Grouped settings items
 * - Consistent styling and spacing
 * - Clean visual separation between sections
 */
export const SettingsSectionComponent: React.FC<SettingsSectionComponentProps> = ({ section }) => {
  return (
    <View style={styles.container}>
      {/* Section title */}
      <Text style={styles.sectionTitle}>{section.title}</Text>
      
      {/* Settings items */}
      <View style={styles.itemsContainer}>
        {section.items.map((item, index) => (
          <SettingsItemComponent
            key={item.id}
            item={item}
            isLast={index === section.items.length - 1}
          />
        ))}
      </View>
    </View>
  );
};

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

const styles = StyleSheet.create({
  // Main container for the settings section
  container: {
    marginBottom: theme.spacing.lg,
  },
  
  // Section title styling
  sectionTitle: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.sm,
    paddingHorizontal: theme.spacing.sm,
  },
  
  // Container for settings items
  itemsContainer: {
    backgroundColor: theme.colors.background,
    borderRadius: theme.borderRadius.medium,
    borderColor: theme.colors.border,
    borderWidth: 1,
    ...theme.shadows.primary,
  },
});

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