import React from 'react'
import ActivityCard from './ActivityCard'

export default function ActivityFeed({ activities, loading, loadingMore, error, sentinelRef }) {
  if (loading) {
    return (
      <div className="rounded-[28px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(10,16,26,0.92),rgba(6,10,18,0.88))] p-6 text-sm text-slate-400 shadow-[0_20px_60px_rgba(0,0,0,0.25)]">
        Loading activity...
      </div>
    )
  }

  if (error) {
    return (
      <div className="rounded-[28px] border border-rose-300/20 bg-rose-500/10 p-6 text-sm text-rose-100 shadow-[0_20px_60px_rgba(0,0,0,0.25)]">
        {error}
      </div>
    )
  }

  if (!activities.length) {
    return (
      <div className="rounded-[28px] border border-dashed border-white/10 bg-[linear-gradient(180deg,rgba(10,16,26,0.92),rgba(6,10,18,0.88))] px-6 py-12 text-center shadow-[0_20px_60px_rgba(0,0,0,0.25)]">
        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl border border-white/10 bg-white/[0.04] text-sky-300">
          <i className="fa-solid fa-wave-square text-xl" />
        </div>
        <h3 className="mt-5 text-lg font-semibold text-white">No activity yet</h3>
        <p className="mx-auto mt-2 max-w-lg text-sm leading-7 text-slate-400">
          Upload artwork, join a conversation, follow creators, or post in the forum to start building this profile timeline.
        </p>

        <div className="mt-6 flex flex-wrap justify-center gap-3">
          <a href="/upload" className="inline-flex items-center gap-2 rounded-full border border-sky-300/30 bg-sky-400/12 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100 transition hover:border-sky-200/50 hover:bg-sky-400/18">
            <i className="fa-solid fa-upload" />
            Upload artwork
          </a>
          <a href="/uploads/latest" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/[0.1] hover:text-white">
            <i className="fa-solid fa-comment-dots" />
            Comment on artwork
          </a>
          <a href="/discover/trending" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/[0.1] hover:text-white">
            <i className="fa-solid fa-user-plus" />
            Follow creators
          </a>
        </div>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {activities.map((activity) => (
        <ActivityCard key={activity.id} activity={activity} />
      ))}

      <div ref={sentinelRef} className="h-12" aria-hidden="true" />

      {loadingMore ? (
        <div className="text-center text-sm text-slate-400">Loading more activity...</div>
      ) : null}
    </div>
  )
}