import { Pressable, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

import { FONT, SceltaStile } from '../componenti.tsx';
import { GrigliaLuoghi } from '../GrigliaLuoghi.tsx';
import type { Schermate } from '../navigazione.ts';
import { useStato } from '../stato.tsx';

export function Luoghi({ navigation }: NativeStackScreenProps<Schermate, 'Luoghi'>) {
  const { t } = useStato();
  return (
    <SafeAreaView style={st.pieno} edges={['top', 'left', 'right']}>
      <View style={st.barra}>
        <SceltaStile />
        <Pressable accessibilityRole="button" accessibilityLabel={t('regole.chiudi')} hitSlop={12} onPress={() => navigation.goBack()} style={st.chiudi}>
          <Text style={st.x}>✕</Text>
        </Pressable>
      </View>
      <GrigliaLuoghi />
    </SafeAreaView>
  );
}

const st = StyleSheet.create({
  pieno: { flex: 1, backgroundColor: '#000' },
  barra: { height: 52, justifyContent: 'center' },
  chiudi: { position: 'absolute', right: 16, top: 12 },
  x: { fontFamily: FONT, fontSize: 24, color: '#FFFFFF' },
});