import { useUserById } from "@/hooks/getUserById";
import VerificationBadge from "@/components/main/VerificationBadge";
import Image from "next/image";
import React from "react";
import { cn } from "@/lib/utils";

interface ProfileHeadRowTwoProps {
  first_name: string;
  last_name: string;
  is_verified: string;
  verify_badge?: string | null;
  is_Register?: string | boolean | null;
  user_name: string;
  user_score?: string;
  rate?: string;
  user_id: string;
  isFa?: boolean;
}

function ModelHeadRowTwo({
  first_name,
  last_name,
  user_name,
  user_score,
  rate,
  user_id,
  verify_badge: verifyBadgeProp,
  is_Register: isRegisterProp,
  isFa = true,
}: ProfileHeadRowTwoProps) {
  const user = useUserById(user_id);
  const verify_badge = verifyBadgeProp ?? user?.verify_badge;
  const is_Register = isRegisterProp ?? user?.is_Register;
  return (
    <div className="py-2 grid w-full grid-cols-3 items-end text-xs md:text-sm font-semibold">
      <div className="flex items-center">
        <>
          <span>{user_score ? user_score : "0"}</span>
          <Image
            width={22}
            height={22}
            alt={"star icon"}
            src={`/images/icons/star1.png`}
          />
        </>
      </div>
      <div className="flex items-center justify-center">
        <>
          <span>{rate ? rate : "0"}</span>
          <Image
            width={22}
            height={22}
            alt={"rate icon"}
            src={`/images/icons/medal-star.png`}
          />
        </>
      </div>
      <div
        className={cn(
          "flex min-w-0 max-w-full flex-col",
          isFa ? "items-end" : "items-start"
        )}
      >
        <h3
          className={cn(
            "truncate max-w-full whitespace-nowrap",
            isFa ? "text-right" : "text-left"
          )}
        >
          {first_name} {last_name}
        </h3>
        <div className="flex items-center gap-1">
          <h3
            className={cn(
              "flex items-center gap-1",
              isFa ? "flex-row-reverse" : "flex-row"
            )}
          >
            {user_name}
            <VerificationBadge verifyBadge={verify_badge} />
          </h3>
        </div>
      </div>
    </div>
  );
}

export default ModelHeadRowTwo;
