import { LanguageSelection } from '@/components/LanguageSelection';
import { useState } from 'react';
import { Text } from 'react-native';
import { Image, StyleSheet, Platform } from 'react-native';
import { Conversation, Speaker } from '../lib/conversation';
import { language_matrix_entry, Translator } from '../i18n/api';

export default function HomeScreen() {

  const [language, setLanguage] = useState<language_matrix_entry | undefined>()

  return (
    language ? <ConversationPlay language={language} /> :
      <LanguageSelection onLanguageSelected={(l) => setLanguage(l)} />
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
});