import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useRouter } from "../router";
import { colors, shared } from "../styles";

export function IndexPage() {
  const { navigate } = useRouter();

  return (
    <View style={shared.screenPadded}>
      <Text style={shared.pageTitleLarge}>TV Control</Text>
      <Text style={shared.subtitle}>Your TV, Your Control.</Text>

      <View style={styles.cards}>
        <TouchableOpacity style={shared.card} onPress={() => navigate("text")} activeOpacity={0.7}>
          <Text style={shared.cardIcon}>💬</Text>
          <Text style={shared.cardTitle}>Text Popup</Text>
          <Text style={shared.cardDesc}>Display a message on the TV screen.</Text>
        </TouchableOpacity>

        <TouchableOpacity style={shared.card} onPress={() => navigate("image")} activeOpacity={0.7}>
          <Text style={shared.cardIcon}>📷</Text>
          <Text style={shared.cardTitle}>Image Popup</Text>
          <Text style={shared.cardDesc}>Take a photo and show it on the TV.</Text>
        </TouchableOpacity>

        <TouchableOpacity style={shared.card} onPress={() => navigate("datacards")} activeOpacity={0.7}>
          <Text style={shared.cardIcon}>📊</Text>
          <Text style={shared.cardTitle}>Data Cards</Text>
          <Text style={shared.cardDesc}>Display live data from custom JSON sources on the TV.</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  cards: {
    gap: 14,
    marginTop: 8,
  },
});

