import React from "react";
import { View, Text, ScrollView, StyleSheet } from "react-native";
import MyStatusbar from "./component/MyStatusbar";
import MyHeader from "./component/MyHeader";
import { NativeStackScreenProps,NativeStackNavigationProp } from "@react-navigation/native-stack";
import { RootStackParamList } from "../App";
import { useTranslation } from 'react-i18next';
import { THEME } from "./theme";

type Props = NativeStackScreenProps<RootStackParamList>;

export default function PrivacyScreen({navigation}:Props) {
  const { t } = useTranslation();
  return (
    <View style={styles.container}>
      <MyStatusbar backgroundColor={THEME.background} dark={false}></MyStatusbar>
      <MyHeader title={t("privacy.title")} textColor={THEME.text} backgroundColor={THEME.background} navigation={navigation}></MyHeader>
      <ScrollView style={{ flex: 1, padding: 20 }}>
        <Text style={styles.title}>{t("privacy.title")}</Text>
        <Text style={styles.text}>{t("privacy.content")}</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: THEME.background,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 15,
    color: THEME.text,
  },
  text: {
    fontSize: 16,
    lineHeight: 24,
    color: THEME.textSoft,
    marginBottom: 50
  },
});
