import { Link } from "expo-router";
import { ImageBackground, Text, TouchableOpacity, View } from "react-native";
import { styles } from "./styles";

// Placeholder images
const netherImage = require("../assets/images/netherportalcalculator.png");
const todoImage = require("../assets/images/todo-list.png");
const coordinatesImage = require("../assets/images/coordinates.png");
const motdImage = require("../assets/images/motd-creator.png");

export default function Index() {
  return (
    <View style={styles.appContainer}>
      <Text style={styles.mainTitle}>Minecraft Tools</Text>

      <View style={styles.gridContainer}>
        {/* Nether Portal Calculator */}
        <View style={styles.gridItem}>
          <Link href="/nether-portal-calculator" asChild style={styles.touchableWrapper}>
            <TouchableOpacity style={styles.touchableWrapper}>
              <ImageBackground source={netherImage} style={styles.imageBackground} resizeMode="cover">
                <View style={styles.overlay}>
                  <Text style={styles.linkButtonText}>Nether Portal Calculator</Text>
                </View>
              </ImageBackground>
            </TouchableOpacity>
          </Link>
        </View>

        {/* Todo List */}
        <View style={styles.gridItem}>
          <Link href="/todo" asChild style={styles.touchableWrapper}>
            <TouchableOpacity style={styles.touchableWrapper}>
              <ImageBackground source={todoImage} style={styles.imageBackground} resizeMode="cover">
                <View style={styles.overlay}>
                  <Text style={styles.linkButtonText}>Todo List</Text>
                </View>
              </ImageBackground>
            </TouchableOpacity>
          </Link>
        </View>

        {/* Saved Coordinates */}
        <View style={styles.gridItem}>
          <Link href="/saved-coordinates" asChild style={styles.touchableWrapper}>
            <TouchableOpacity style={styles.touchableWrapper}>
              <ImageBackground source={coordinatesImage} style={styles.imageBackground} resizeMode="cover">
                <View style={styles.overlay}>
                  <Text style={styles.linkButtonText}>Saved Coordinates</Text>
                </View>
              </ImageBackground>
            </TouchableOpacity>
          </Link>
        </View>

        {/* MOTD Creator */}
        <View style={styles.gridItem}>
          <Link href="/motd" asChild style={styles.touchableWrapper}>
            <TouchableOpacity style={styles.touchableWrapper}>
              <ImageBackground source={motdImage} style={styles.imageBackground} resizeMode="cover">
                <View style={styles.overlay}>
                  <Text style={styles.linkButtonText}>MOTD Creator</Text>
                </View>
              </ImageBackground>
            </TouchableOpacity>
          </Link>
        </View>
      </View>
    </View>
  );
}