import BlogPosts from './components/BlogPosts';
import useFetch from './hooks/use-fetch';

function App() {
  const [{ data, isLoading, error }, fetchPosts] = useFetch(
    'https://jsonplaceholder.typicode.com/posts'
  );

  return (
    <>
      <header>
        <h1>Blog ze złożonym stanem</h1>
        <button onClick={fetchPosts}>Wczytaj artykuły</button>
      </header>
      {isLoading && <p>Wczytywanie w toku...</p>}
      {error && <p>{error}</p>}
      {data && <BlogPosts posts={data} />}
    </>
  );
}

export default App;
