import { useEffect, useState } from 'react'
import { MomentCard } from '../components/MomentCard'
import { listFeed } from '../api/moments'
import type { Moment } from '../api/types'

export function FeedPage() {
  const [moments, setMoments] = useState<Moment[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    listFeed()
      .then((page) => setMoments(page.results))
      .finally(() => setLoading(false))
  }, [])

  if (loading) return <div className="page-loading">Loading feed…</div>

  if (moments.length === 0) {
    return (
      <div className="feed-empty">
        <p>No Moments yet. Share something from your Library to get started.</p>
      </div>
    )
  }

  return (
    <div className="feed-page">
      {moments.map((moment) => (
        <MomentCard key={moment.id} moment={moment} />
      ))}
    </div>
  )
}