"use client";

import { useParams } from "next/navigation";
import { useState } from "react";

export default function UserProfileClient() {
  // 1. Read dynamic route params from context using TypeScript generics
  const params = useParams<{ userId: string }>();
  const userId = params.userId;

  const [isFollowing, setIsFollowing] = useState<boolean>(false);

  return (
    <div className="card w-96 bg-base-100 shadow-xl border border-base-200">
      <div className="card-body">
        <div className="flex justify-between items-center">
          <h2 className="card-title text-base-content">Client Component</h2>
          <span className="badge badge-accent badge-outline">useParams()</span>
        </div>

        <p className="py-2 text-sm text-base-content/70">
          Loaded Profile for User ID:{" "}
          <span className="badge badge-neutral font-mono font-semibold">
            {userId}
          </span>
        </p>

        <div className="card-actions justify-end mt-4">
          <button
            onClick={() => setIsFollowing(!isFollowing)}
            className={`btn ${
              isFollowing ? "btn-outline btn-error" : "btn-primary"
            }`}
          >
            {isFollowing ? "Unfollow" : "Follow User"}
          </button>
        </div>
      </div>
    </div>
  );
}