import { useEffect } from 'react';
import MetaTags from '../components/partials/MetaTags';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '../app/store';
import { fetchFeedPostsData, fetchFeedStoriesData } from '../app/reducers/feed';
import CreatePost from '../components/feed/CreatePost';
import Feeds from '../components/feed/Feeds';
import Stories from '../components/feed/Stories';

export default function Feed() {
  const dispatch = useDispatch<AppDispatch>();
  
  useEffect(() => {
    dispatch(fetchFeedStoriesData(1));
    dispatch(fetchFeedPostsData(1));
  }, [dispatch]);

  return (
    <div className="max-w-4xl mx-auto px-4 py-6 pb-8 bg-gray-100 pt-[85px] md:pt-[20px]">
      <MetaTags title="Feed" />
      {/* Post creation card */}
      <CreatePost />
      {/* Stories section */}
      <Stories />

      {/* Feed posts */}
      <Feeds />
    </div>
  );
}