import { View, Text, Button } from "react-native-ui-lib";
import React from "react";
import { StyleSheet } from "react-native";
import { Entypo, Ionicons, Octicons } from "@expo/vector-icons";

const styles = StyleSheet.create({
  mainBtn: { width: "100%", justifyContent: "flex-start", marginBottom: 20, height: 60 },
});

const SettingsPage = () => {
  return (
    <View centerH marginH-30 marginT-30>
      <Button
        backgroundColor="white"
        style={styles.mainBtn}
        label="Manage my profile"
        color="#07b8c7"
        iconSource={() => (
          <Ionicons name="person-circle-sharp" size={24} color="#07b8c7" style={{marginRight: 10}} />
        )}
      />
      <Button
        backgroundColor="white"
        style={styles.mainBtn}
        label="Calendar settings"
        color="#fd1775"
        iconSource={() => (
          <Ionicons name="home-outline" size={24} color="#fd1775" style={{marginRight: 10}} />
        )}
      />
      <Button
        backgroundColor="white"
        style={styles.mainBtn}
        label="Chore reward settings"
        color="#ff9900"
        iconSource={() => (<Octicons name="gear" size={24} color="#ff9900" style={{marginRight: 10}} />)}
      />
      <Button
        backgroundColor="white"
        style={styles.mainBtn}
        label="Kaly privacy policy"
        iconSource={() => (
          <Entypo name="text-document" size={24} color="#6c645b" style={{marginRight: 10}} />
        )}
        color="#6c645b"
      />
    </View>
  );
};

export default SettingsPage;