// ../components/FontSettings.js

import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { CustomTextR } from './CustomText'; // Ensure this path is correct based on your project structure

const ARABIC_FONTS = {
  'Mirza': require('../../assets/fonts/mirza.ttf'),
  'NotoSansArabic': require('../../assets/fonts/NotoSansArabic-Regular.ttf'),
  'Amiri': require('../../assets/fonts/amiri.ttf'),
  'NotoNaskhArabic': require('../../assets/fonts/noto.ttf'),
};

const FontSettings = ({
  fontSize,
  increaseFontSize,
  decreaseFontSize,
  setFontFamily,
  currentFontFamily,
  theme,
  t,
}) => {
  return (
    <View style={styles.settingsContent}>
      {/* Example Card */}
      <View style={styles.exampleCard}>
        <Text style={[styles.exampleText, { fontSize: fontSize * 1.4, fontFamily: currentFontFamily }]}>
          (هذا مثال على الكتابة بالعربية)
        </Text>
      </View>
      
      {/* Font Size Controls */}
      <View style={styles.fontSizeControls}>
        <TouchableOpacity onPress={increaseFontSize} style={styles.fontSizeButton}>
          <Ionicons name="add-circle-outline" size={40} color={theme.primaryColor} />
          <Text style={styles.fontSizeButtonText}>{t('increaseFontSize')}</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={decreaseFontSize} style={styles.fontSizeButton}>
          <Ionicons name="remove-circle-outline" size={40} color={theme.primaryColor} />
          <Text style={styles.fontSizeButtonText}>{t('decreaseFontSize')}</Text>
        </TouchableOpacity>
      </View>
      
      {/* Font Family Selection */}
      <View style={styles.fontOptionsContainer}>
        {Object.keys(ARABIC_FONTS).map((font) => (
          <TouchableOpacity
            key={font}
            style={styles.fontOption}
            onPress={() => setFontFamily(font)}
          >
            <Text style={styles.fontOptionText}>{font}</Text>
            <Text style={[styles.fontOptionSample, { fontFamily: font }]}>
              (اقرأ العربية)
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  settingsContent: {
    flexGrow: 1,
    padding: 20,
  },
  exampleCard: {
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 15,
    marginVertical: 20,
    width: '90%',
    alignSelf: 'center',
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  exampleText: {
    textAlign: 'center',
  },
  fontSizeControls: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '100%',
    marginBottom: 20,
  },
  fontSizeButton: {
    alignItems: 'center',
  },
  fontSizeButtonText: {
    marginTop: 5,
    fontSize: 12,
    color: 'gray',
    textAlign: 'center',
  },
  fontOptionsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    marginTop: 20,
    width: '80%',
    alignSelf: 'center',
  },
  fontOption: {
    width: '45%',
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 10,
    marginBottom: 20,
    alignItems: 'center',
    elevation: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.22,
    shadowRadius: 2.22,
  },
  fontOptionText: {
    fontSize: 16,
    marginBottom: 5,
    textAlign: 'center',
  },
  fontOptionSample: {
    fontSize: 18,
  },
});

export default FontSettings; burada font değiştirme işini https://www.npmjs.com/package/react-native-awesome-slider kullanarak güzelleştir. örnek kullanım: import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';

export const Example = () => {
  const progress = useSharedValue(30);
  const min = useSharedValue(0);
  const max = useSharedValue(100);
  return (
    <Slider
      style={styles.container}
      progress={progress}
      minimumValue={min}
      maximumValue={max}
    />
  );
};