import { View, Image, Text, TouchableOpacity } from "react-native";
import styles from "@/app/stackStyles/participantStyles";
import Ionicons from "@expo/vector-icons/Ionicons";
import { router } from "expo-router";
import {
  ScrollView,
  GestureHandlerRootView,
} from "react-native-gesture-handler";

export default function ParticipantScreen() {
  return (
    <GestureHandlerRootView style={styles.mainContainer}>
      <Text style={styles.participantName}>Calvin Ogara</Text>
      <TouchableOpacity style={styles.closeIcon} onPress={() => router.back()}>
        <Ionicons name="close-circle-outline" size={38} color="white" />
      </TouchableOpacity>
      <View style={styles.participantInfoSection}>
        <Text style={styles.participantInfo}>Single</Text>
        <View style={styles.dot} />
        <Text style={styles.participantInfo}>24 Jahre</Text>
        <View style={styles.dot} />
        <Text style={styles.participantInfo}>Köln</Text>
      </View>
      <Image
        source={{
          uri: "https://www.fernseh-puls.com/wp-content/uploads/are-you-the-one-calvin-o-im-steckbrief-wir-stellen-euch-den-kandidaten-vor.jpg",
        }}
        style={styles.participantImage}
      />

      <View style={styles.performedShowsSection}>
        <Text style={styles.performedShowsTitle}>Auftritte:</Text>

        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          style={{
            width: "100%",
            marginTop: 15,
          }}
        >
          {[...Array(5)].map((show, index) => (
            <View style={styles.showContainer} key={index}></View>
          ))}
        </ScrollView>
      </View>
    </GestureHandlerRootView>
  );
}