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

export const HomePage = () => {
  useEffect(() => {
    console.log('first rendered');
  }, []);

  return (
    <Page>
      <div>
        <PageTitle>Unanswered Questions</PageTitle>
        <button>Ask a question</button>{' '}
        {/* This button component is passed as children of Page */}
      </div>
      {/* <QuestionList
        data={getUnansweredQuestions()}
      /> */}
    </Page>
  );
};