import * as React from 'react';
import { View, Button, Pressable, Text } from 'react-native';
import { useTranslation } from 'react-i18next';
import { HomeScreenProps } from '../types';
import CircularPanel from '../components/CircularPanel';

export function HomeScreen({ navigation, route }: HomeScreenProps) {

  const { context } = route.params;
  const { t } = useTranslation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: context.themeManager.theme?.background }}>
      <Pressable onPress={() => navigation.replace('Loby', { context })}>
        <CircularPanel color={context.themeManager.theme?.boardColor} children={<Text style={{color: context.themeManager.theme.textColor}}>{t('NewGame')}</Text>}/>
      </Pressable>
    </View>
  );
}