import { StyleSheet, View } from 'react-native';
import { Image } from 'expo-image';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

import { TITOLO } from '../../immagini.ts';
import { Pulsante, Sfondo } from '../componenti.tsx';
import type { Schermate } from '../navigazione.ts';
import { useStato } from '../stato.tsx';

export function Home({ navigation }: NativeStackScreenProps<Schermate, 'Home'>) {
  const { t } = useStato();
  return (
    <Sfondo>
      <Image source={TITOLO} style={st.titolo} contentFit="contain" accessibilityLabel="Spot The Spy" />
      <View style={st.spazio} />
      <Pulsante titolo={t('home.gioca')} onPress={() => navigation.navigate('Impostazioni')} />
      <Pulsante titolo={t('home.regole')} suono="page" onPress={() => navigation.navigate('Regole')} />
    </Sfondo>
  );
}

const st = StyleSheet.create({
  titolo: { width: '85%', aspectRatio: 1242 / 908, alignSelf: 'center', marginTop: 24 },
  spazio: { flex: 1 },
});