import { StyleSheet, TouchableOpacity, View } from "react-native";

const CustomSwitch = ({ isEnabled, toggleSwitch }: { isEnabled: boolean, toggleSwitch: () => void }) => (
    <TouchableOpacity
        activeOpacity={0.8}
        onPress={toggleSwitch}
        style={[styles.switchContainer, isEnabled ? styles.switchOn : styles.switchOff]}
    >
        <View style={[styles.switchCircle, isEnabled ? styles.switchCircleOn : styles.switchCircleOff]} />
    </TouchableOpacity>
);

const styles = StyleSheet.create({
    switchContainer: {
        width: 50,
        height: 30,
        borderRadius: 15,
        justifyContent: 'center',
        paddingHorizontal: 4,
    },
    switchOn: {
        backgroundColor: '#FFB645',
        alignItems: 'flex-end',
    },
    switchOff: {
        backgroundColor: '#E5E5E5',
        alignItems: 'flex-start',
    },
    switchCircle: {
        width: 26,
        height: 26,
        borderRadius: 13,
    },
    switchCircleOn: {
        backgroundColor: 'white',
    },
    switchCircleOff: {
        backgroundColor: '#A5A5A5',
    },
});

export default CustomSwitch;