/*
 * File: SettingsPanel.tsx
 * Description: Component for displaying and toggling user settings (stub)
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { View, Text, StyleSheet, Switch } from 'react-native';
import { Colors, Spacing, Typography } from '../../../../shared/src/theme';

interface SettingsPanelProps {
  settings: { notificationsEnabled: boolean; darkMode: boolean; language: string };
  onChange: (changes: Partial<SettingsPanelProps['settings']>) => void;
}

/**
 * SettingsPanel - displays and toggles user settings (stub)
 */
const SettingsPanel: React.FC<SettingsPanelProps> = ({ settings, onChange }) => (
  <View style={styles.container}>
    <Text style={styles.title}>Settings</Text>
    <View style={styles.row}>
      <Text style={styles.label}>Notifications</Text>
      <Switch value={settings.notificationsEnabled} onValueChange={v => onChange({ notificationsEnabled: v })} />
    </View>
    <View style={styles.row}>
      <Text style={styles.label}>Dark Mode</Text>
      <Switch value={settings.darkMode} onValueChange={v => onChange({ darkMode: v })} />
    </View>
    <View style={styles.row}>
      <Text style={styles.label}>Language</Text>
      <Text style={styles.value}>{settings.language}</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    padding: Spacing.md,
    backgroundColor: Colors.backgroundAlt,
    borderRadius: 8,
  },
  title: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.md,
    color: Colors.primary,
    marginBottom: Spacing.md,
    textAlign: 'center',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: Spacing.md,
  },
  label: {
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.md,
    color: Colors.textPrimary,
  },
  value: {
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.md,
    color: Colors.textSecondary,
  },
});

export default SettingsPanel;

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