"use client";

import { useState, useTransition } from "react";
import { toggleLike } from "@/lib/social/actions";

export function LikeButton({
  targetUserId,
  initiallyLiked,
  likeCount,
}: {
  targetUserId: string;
  initiallyLiked: boolean;
  likeCount: number;
}) {
  const [liked, setLiked] = useState(initiallyLiked);
  const [count, setCount] = useState(likeCount);
  const [isPending, startTransition] = useTransition();

  function handleClick() {
    const nextLiked = !liked;
    setLiked(nextLiked);
    setCount((c) => c + (nextLiked ? 1 : -1));

    startTransition(async () => {
      await toggleLike(targetUserId);
    });
  }

  return (
    <button
      onClick={handleClick}
      disabled={isPending}
      className={`inline-flex items-center gap-2 rounded-full border px-5 py-2.5 text-[14px] font-semibold transition-colors ${
        liked ? "border-accent bg-accent/10 text-accent" : "border-border bg-surface text-text-muted hover:border-accent"
      }`}
    >
      <svg
        width="17"
        height="17"
        viewBox="0 0 24 24"
        fill={liked ? "currentColor" : "none"}
        stroke="currentColor"
        strokeWidth={1.8}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="M12 20s-7-4.35-9.5-8.5C.5 8 2 4 6 4c2 0 3.5 1.2 4 2.5C10.5 5.2 12 4 14 4c4 0 5.5 4 3.5 7.5C19 15.65 12 20 12 20z" />
      </svg>
      {liked ? "Beğenildi" : "Beğen"}
      {count > 0 && <span className="text-[12.5px] opacity-70">({count})</span>}
    </button>
  );
}