import { useCallback } from 'react'
import { Post } from '../model/posts/posts.ts'
import { loadPublicFeed } from '../api/api.ts'
import FeedView from './FeedView.tsx'

export default function HomePage() {
  const fetchPosts = useCallback(async (cursor: string | null, amount: number | null) => {
    const result = await loadPublicFeed(cursor, amount)
    return result.posts.map((post) => Post.fromDto(post))
  }, [])

  const handleCreatePost = useCallback(async (content: string, media: File[]) => {
    // This is a placeholder for the actual implementation
    // In a real app, you would call an API to create a post
    console.log('Creating post:', { content, media })

    // Simulate API call delay
    await new Promise(resolve => setTimeout(resolve, 1000))

    // You would typically refresh the feed after creating a post
    // This could be done by calling fetchPosts again or by adding the new post to the state
  }, [])

  return <FeedView loadPosts={fetchPosts} onCreatePost={handleCreatePost} />
}