import React from 'react';
import { PageTitle } from './PageTitle';
import { Page } from './Page';
import { QuestionList } from './QuestionList';
import { getUnansweredQuestions, QuestionData } from './QuestionsData';

export const HomePage = () => {
  const [questions, setQuestions] = React.useState<QuestionData[]>([]);
  const [questionsLoading, setQuestionsLoading] = React.useState(true);

  React.useEffect(() => {
    const doGetUnansweredQuestion = async () => {
      const unanswereedQuestions = await getUnansweredQuestions();
      setQuestions(unanswereedQuestions);
      setQuestionsLoading(false);
    };
    doGetUnansweredQuestion();
  }, []);

  console.log('rendered');

  return (
    <Page>
      <div>
        <PageTitle>Unanswered Questions</PageTitle>
        <button>Ask a question</button>{' '}
        {/* This button component is passed as children of Page */}
      </div>
      {questionsLoading ? (
        <div>Loading...</div>
      ) : (
        <QuestionList data={questions || []} />
      )}
    </Page>
  );
};