import React, { useState } from 'react';
import Navigation from './components/Navigation';
import PostFeed from './components/PostFeed';
import CreatePost from './components/CreatePost';
import { ThemeProvider } from './contexts/ThemeContext';
import { Post } from './types';

function App() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [showCreatePost, setShowCreatePost] = useState(false);

  const addPost = (newPost: Post) => {
    setPosts(prev => [newPost, ...prev]);
    setShowCreatePost(false);
  };

  const toggleLike = (postId: string) => {
    setPosts(prev => prev.map(post => 
      post.id === postId 
        ? { ...post, likes: post.isLiked ? post.likes - 1 : post.likes + 1, isLiked: !post.isLiked }
        : post
    ));
  };

  return (
    <ThemeProvider>
      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
        <Navigation onCreatePost={() => setShowCreatePost(true)} />
        
        <main className="max-w-2xl mx-auto px-4 py-8">
          {showCreatePost && (
            <div className="mb-8">
              <CreatePost 
                onPost={addPost} 
                onCancel={() => setShowCreatePost(false)} 
              />
            </div>
          )}
          
          <PostFeed posts={posts} onToggleLike={toggleLike} />
        </main>
      </div>
    </ThemeProvider>
  );
}

export default App;