// components/UserCard.tsx
"use client";
import React from "react";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { User } from "../../types/SearchUserType";
import { useAppDispatch } from "@/app/hooks/hooks";
import { setUserId } from "@/app/store/Slice/SetUserIdForChatOpen";
import TextTranslate from "@/app/utils/TextTranslate";

interface UserCardProps {
  user: User;
  onFollow: (userId: string) => void;
  onClose: () => void;
}

const UserCard: React.FC<UserCardProps> = ({
  user,
  onFollow,
  onClose,
}) => {
  const router = useRouter();
  const dispatch = useAppDispatch()
 const handleUsernameClick = (user: User) => {
  if (!user?.username) {
    console.error("Username missing:", user);
    return;
  }
  router.push(`/Profile/${user.username}`);
  onClose();
};

  return (
    <div className="flex items-center justify-between px-4 sm:px-6 py-3 hover:bg-[color-mix(in_srgb,var(--text-primary),transparent_95%)]">
      <div className="flex items-center gap-3">
        <img
          src={user.profile_pic || "/assets/default_user.png"}
          alt={user.first_name || "User"}
          className="w-12 h-12 rounded-full object-cover border border-[var(--border-colordark)] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]"
        />

        <div className="flex flex-col">
         <button onClick={() => handleUsernameClick(user)} className="text-left">
  <p className="text-[var(--text-primary)] font-gilroy_semibold font-bold text-[15px]">
    {user.first_name} {user.last_name}
  </p>
</button>
          <p className="text-[var(--text-secondary)] text-[13px]">
            @{user.username}
          </p>
        </div>
      </div>

      {user.is_me === "0" && (
        <button
          className={`rounded-xl font-gilroy_semibold text-[12px] h-fit w-[80px] py-1.5 transition-all duration-300 active:scale-95 ${
            user.is_follow === "1"
              ? "text-[#341F60] dark:text-[var(--text-primary)] bg-transparent border border-[#341F60] dark:border-[color-mix(in_srgb,var(--border-color),white_10%)]"
              : "bg-gradient-custom text-white border border-transparent"
          }`}
          onClick={() => onFollow(user.follow_user_id)}
        >
          {user.is_follow === "1" ? <TextTranslate text="Following"/> : <TextTranslate text="Follow"/>}
        </button>
      )}
    </div>
  );
};

export default UserCard;