import { View } from 'react-native';

import { useQuestions } from '@/api';
import Question from '@/components/question';
import Content from '@/components/ui/content';
import { ThemedText } from '@/components/ui/themed-text';
import { router } from 'expo-router';

export default function QuestionsScreen() {
  const { data: questions, isLoading: isLoadingQuestions } = useQuestions();

  const questionsLoaded =
    !isLoadingQuestions && questions && questions.meta.total > 0;

  return (
    <Content>
      <ThemedText type="title" className='mb-3'>Questions</ThemedText>

      <View className='gap-3'>
        {questionsLoaded &&
        questions.data.map((question) => (
          <Question
            key={question.id}
            question={question}
            onPress={() => router.push(`/questions/${question.id}`)}
          />
        ))}
      </View>
      
    </Content>
  )
}