import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Linking,
  Pressable,
} from "react-native";
import { FlatList, TouchableHighlight } from "react-native-gesture-handler";
import { ButtonLay } from "./components/Button.js";
import Leyes from "./data/leyes.json";
import LeyesPR from "./data/leyesPR.json";
import DerechosAmb from "./data/derechos.json";

const Derechos = () => {
  return (
    <>
      <View>
        <Text style={styles.container2}>1) Leyes de la Tierra</Text>
        <View >
          {Leyes.map(({id, title, link}) => {
            return (
              <>
                <TouchableOpacity
                  style={styles.button}
                  key={id}
                  onPress={() => {
                    Linking.openURL(link.toString());
                  }}
                >
                  <Text style={styles.text}>{title}</Text>
                </TouchableOpacity>
              </>
            );
          })}
        </View>
      </View>

      <View>
        <Text style={styles.container2}>
          2) Derechos del activista climatico
        </Text>
        <View>
          {DerechosAmb.map(({id, title, link}) => {
            return (
              <>
                <TouchableOpacity
                 
                  style={styles.button}
                  onPress={() => {
                    Linking.openURL(link.toString());
                  }}
                >
                  <Text style={styles.text}  key={id} >{title}</Text>
                </TouchableOpacity>
              </>
            );
          })}
        </View>
      </View>

       <View>
        <Text style={styles.container2}>3) Leyes de Puerto Rico</Text>
        <View>
          {LeyesPR.map(({id, title, link}) => {
            return (
              <>
                <TouchableOpacity
                  style={styles.button}
                  onPress={() => {
                    Linking.openURL(link.toString());
                  }}
                >
                  <Text style={styles.text} key={id}>{title}</Text>
                </TouchableOpacity>
              </>
            );
          })}
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    fontSize: 25,
    textAlign: "center",
    marginTop: "10%",
  },

  container2: {
    fontSize: 25,
    textAlign: "left",
    marginTop: "10%",
    marginLeft: "5%",
  },

  laws: {
    fontSize: 15,
    textAlign: "center",
    marginTop: "5%",
  },
  button: {
    width: 250,
    alignSelf: "center",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
    elevation: 3,
    backgroundColor: "#009688",
    marginTop: "5%",
  },
  text: {
    fontSize: 16,
    lineHeight: 21,
    fontWeight: "bold",
    letterSpacing: 0.25,
    color: "white",
    textAlign: "center",
  },
});

export default Derechos;