import Link from "next/link";
import { Avatar } from "@/components/ui/Avatar";
import { FollowWatchButtons } from "./FollowWatchButtons";

export function UploaderCard({
  uploader,
  highestBadgeName,
  viewer,
}: {
  uploader: { id: string; username: string; avatarUrl: string | null };
  highestBadgeName: string | null;
  viewer: {
    id: string | null;
    isFollowing: boolean;
    isWatching: boolean;
  };
}) {
  const isSelf = viewer.id === uploader.id;

  return (
    <div className="flex items-center justify-between gap-4 rounded-lg border border-charcoal/10 bg-warm-white p-4">
      <div className="flex items-center gap-3">
        <Avatar username={uploader.username} avatarUrl={uploader.avatarUrl} />
        <div>
          <Link
            href={`/labels?uploader=${encodeURIComponent(uploader.username)}`}
            className="font-medium text-charcoal hover:text-terracotta hover:underline"
          >
            {uploader.username}
          </Link>
          {highestBadgeName && (
            <p className="text-xs text-gold">{highestBadgeName}</p>
          )}
        </div>
      </div>

      {viewer.id && !isSelf && (
        <FollowWatchButtons
          targetUserId={uploader.id}
          initialFollowing={viewer.isFollowing}
          initialWatching={viewer.isWatching}
        />
      )}
    </div>
  );
}