import { View, ScrollView, StyleSheet } from 'react-native';
import { Text, Card } from 'react-native-paper';
import { useLocalSearchParams } from 'expo-router';
import { Locations } from '@/constants/Locations';

export default function Location() {
  const { id } = useLocalSearchParams();
  const location = Locations.find(loc => loc.id == id);

  if (!location) {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Brak lokalizaji - {id}</Text>
      </View>
    );
  }
  return (
    <View style={styles.container}>
    <ScrollView>
      <Card style={{ margin: 10}}>
        <Card.Cover style={{marginBottom: 10}} source={{ uri: location.image }} />
        <Card.Content  style={{marginBottom: 10}}>
          <Text variant="headlineLarge" style={{marginBottom: 10}}>
            {location.name}
          </Text>
          <Text variant="headlineLarge" style={{marginBottom: 10}}>
            Opis:
          </Text>
          <Text variant="bodyMedium">
            {location.longDescription}
          </Text>
        </Card.Content>

        <Card.Content>
          <Text variant="headlineLarge" style={{marginBottom: 10}}>
            Statystyki:
          </Text>
          <Text variant="bodyMedium" style={{marginBottom: 10}}>
            Powierzchnia: {location.area} km²
            </Text>
          <Text variant="bodyMedium" style={{marginBottom: 10}}>
            Ludność: {location.population} osób
            </Text>
          <Text variant="bodyMedium" style={{marginBottom: 10}}>
            Gęstość zaludnienia: {location.density} osób/km²
            </Text>
          <Text variant="bodyMedium" style={{marginBottom: 10}}>
            Wysokość nad poziomem morza: {location.elevation} m n.p.m.
            </Text>
        </Card.Content>
      </Card>
    </ScrollView></View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
  },
});