import React from 'react'
import ReactionBar from '../comments/ReactionBar'

export default function ActivityReactions({ activity, isLoggedIn = false }) {
  const commentId = activity?.comment?.id || null
  const commentUrl = activity?.comment?.url || activity?.artwork?.url || '#'
  const artworkUrl = activity?.artwork?.url || null

  return (
    <div className="flex flex-wrap items-center gap-3 pt-2">
      {commentId ? (
        <ReactionBar
          entityType="comment"
          entityId={commentId}
          initialTotals={activity?.comment?.reactions || {}}
          isLoggedIn={isLoggedIn}
        />
      ) : null}

      <a
        href={commentUrl}
        className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/55 transition hover:border-sky-400/30 hover:bg-sky-500/10 hover:text-sky-200"
      >
        <i className="fa-regular fa-comment-dots" />
        Reply
      </a>

      {artworkUrl ? (
        <a
          href={artworkUrl}
          className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/55 transition hover:border-white/15 hover:bg-white/[0.07] hover:text-white"
        >
          <i className="fa-regular fa-image" />
          View artwork
        </a>
      ) : null}
    </div>
  )
}