import React from "react";
import { StyleSheet, View, Text, Pressable } from "react-native";
import useTestStore from "../../providers/test_store";
import useSignUpStore from "../../providers/signup_form_store";

export default function Index() {
  /**********************************狀態管理**********************************/
  const value = useTestStore((state) => state.value);
  const add = useTestStore((state) => state.add);
  const minus = useTestStore((state) => state.minus);

  /**********************************狀態管理**********************************/
  /**********************************組件初始化**********************************/
  /**********************************組件初始化**********************************/
  /**********************************異步函數**********************************/
  /**********************************異步函數**********************************/
  return (
    <View>
      <TestButton cb={minus} label="Minus" />
      <Text>States goes here: {value}</Text>
      <TestButton cb={add} label="Add" />
    </View>
  );
}

const TestButton = ({ label, cb }: { label: string; cb: () => void }) => (
  <Pressable
    onPress={() => {
      cb();
    }}
  >
    <Text
      style={{
        color: "#02677D",
        fontSize: 16,
        paddingVertical: 5,
      }}
    >
      {label}
    </Text>
  </Pressable>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: "100%",
    height: "100%",
  },
});