1import { B } from '@expo/html-elements';
2import React from 'react';
3import { StyleSheet, Switch, View, TextStyle, ViewStyle } from 'react-native';
4
5type Props = {
6  style?: ViewStyle;
7  titleStyle?: TextStyle;
8  title?: string;
9  value: boolean;
10  disabled?: boolean;
11  setValue: (value: boolean) => void;
12};
13
14const TitleSwitch = ({ style, titleStyle, title, value, setValue, disabled }: Props) => {
15  const outputTitle = disabled ? `${title} (Disabled)` : title;
16  return (
17    <View style={[styles.container, style]}>
18      <B style={[styles.title, titleStyle]}>{outputTitle}</B>
19      <Switch disabled={disabled} value={value} onValueChange={(value) => setValue(value)} />
20    </View>
21  );
22};
23
24const styles = StyleSheet.create({
25  container: {
26    flexDirection: 'row',
27    alignItems: 'center',
28    marginVertical: 12,
29    justifyContent: 'space-between',
30  },
31  title: {
32    marginRight: 12,
33  },
34  text: {
35    marginVertical: 15,
36    maxWidth: '80%',
37    marginHorizontal: 10,
38  },
39});
40
41export default TitleSwitch;
42