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

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

function ModelHeadRowTwo({
  first_name,
  last_name,
  user_name,
  user_score,
  rate,
  user_id,
  is_verified: isVerifiedProp,
  is_Register: isRegisterProp,
}: ProfileHeadRowTwoProps) {
  const user = useUserById(user_id);
  const is_verified = isVerifiedProp ?? user?.is_verified;
  const is_Register = isRegisterProp ?? user?.is_Register;
  return (
    <div className="px-4 py-2 grid w-full grid-cols-3 items-end text-xs md:text-sm font-semibold">
      <div className="flex items-center">
        <>
          <span>{rate ? rate : "0"}</span>
          <Image
            width={22}
            height={22}
            alt={"verify icon"}
            src={`/images/icons/star1.svg`}
          />
        </>
      </div>
      <div className="flex items-center justify-center">
        <>
          <span>{user_score ? user_score : "0"}</span>
          <Image
            width={22}
            height={22}
            alt={"verify icon"}
            src={`/images/icons/medal-star.svg`}
          />
        </>
      </div>
      <div className="flex flex-col items-end">
        <h3>
          {first_name} {last_name}
        </h3>
        <div className="flex items-center gap-1">
        
          <h3 className="flex items-center gap-1 flex-row-reverse">
            {user_name}
            <VerificationBadge
              isVerified={is_verified}
              isRegister={is_Register}
            />
          </h3>
        </div>
      </div>
    </div>
  );
}

export default ModelHeadRowTwo;
