import React, { useState, useEffect } from 'react';
import NotionPage from './pages/NotionPage';

const App = () => {
  const [notionData, setNotionData] = useState(null);

  useEffect(() => {
    // Notion 페이지 정보를 가져오는 비동기 함수 또는 API 호출을 수행
    const fetchNotionData = async () => {
      const NOTION_API_URL = 'https://api.notion.com/v1';
      const PAGE_ID = process.env.REACT_APP_PAGE_ID;
      const NOTION_TOKEN = process.env.REACT_APP_SECRET;

      try {
        const response = await fetch(`${NOTION_API_URL}/blocks/${PAGE_ID}`, {
          headers: {
            Authorization: `Bearer ${NOTION_TOKEN}`,
            'Notion-Version': '2021-08-16',
          },
        });

        if (!response.ok) {
          throw new Error('Notion API 호출에 실패했습니다.');
        }

        const data = await response.json();
        setNotionData(data);
      } catch (error) {
        console.error('Error fetching Notion data:', error);
      }
    };

    fetchNotionData();
  }, []);

  return (
    <div className='App'>
      {notionData ? <NotionPage notionData={notionData} /> : '로딩 중...'}
    </div>
  );
};

export default App;