import React from 'react';
import { Post } from '../types';
import PostCard from './PostCard';

interface PostFeedProps {
  posts: Post[];
  onToggleLike: (postId: string) => void;
}

const PostFeed: React.FC<PostFeedProps> = ({ posts, onToggleLike }) => {
  if (posts.length === 0) {
    return (
      <div className="text-center py-12">
        <div className="w-16 h-16 bg-gray-900 dark:bg-white rounded-full flex items-center justify-center mx-auto mb-4">
          <span className="text-white dark:text-gray-900 text-2xl">📝</span>
        </div>
        <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">No posts yet</h3>
        <p className="text-gray-500 dark:text-gray-400 mb-6">Start sharing your thoughts and media with others!</p>
        <div className="text-sm text-gray-400 dark:text-gray-500">
          Click the "Create" button above to get started
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {posts.map((post) => (
        <PostCard
          key={post.id}
          post={post}
          onToggleLike={onToggleLike}
        />
      ))}
    </div>
  );
};

export default PostFeed;