import { useRouter } from "expo-router";
import { Pressable, StyleSheet, View } from "react-native";
import AppScreen from "./src/components/ui/AppScreen";
import AppText from "./src/components/ui/AppText";
import { typography } from "./src/theme/typography";

export default function Payments() {
  const router = useRouter();

  return (
    <AppScreen>
      <View style={styles.header}>
        <Pressable style={styles.backButton} onPress={() => router.back()}>
          <AppText style={styles.backText}>← Back</AppText>
        </Pressable>
        <AppText style={styles.title}>Payments</AppText>
      </View>
      <View style={styles.content}>
        <AppText style={styles.text}>Payments system coming soon...</AppText>
      </View>
    </AppScreen>
  );
}

const styles = StyleSheet.create({
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
  },
  backButton: {
    marginRight: 20,
  },
  backText: {
    color: "#000",
    fontSize: 16,
    fontFamily: typography.regular,
  },
  title: {
    fontSize: 24,
    fontFamily: typography.semibold,
    color: "#E65100",
    marginTop: 0,
    marginBottom: 0,
    textAlign: "left",
  },
  content: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontSize: 18,
    fontFamily: typography.regular,
    color: "#666",
  },
});
