import UserInfo from "@/components/main/UserInfo";
import { SelectedUser } from "@/types/types";
import Image from "next/image";
import React from "react";

function ProjectWorkroomSelectedUser({
  selectedUser,
}: {
  selectedUser: SelectedUser;
}) {
  return (
    <div className="w-full flex flex-col items-center text-xs md:text-sm">
      <span className="text-[#17337B] font-semibold my-2 text-base">
        انجام شده توسط
      </span>
      <div className="flex items-end w-full justify-between max-w-[320px] md:max-w-md">
        <UserInfo
          first_name={selectedUser?.first_name}
          is_verified={selectedUser?.is_verified}
          profile_image={selectedUser?.profile_image}
          user_level={selectedUser?.user_level}
          last_name={selectedUser?.last_name}
          user_name={selectedUser?.user_name}
        />
        <div className="flex gap-3">
          <div className="flex items-center justify-center gap-0.5">
            <>
              <span>
                {selectedUser?.user_score ? selectedUser?.user_score : "0"}
              </span>
              <Image
                width={21}
                height={21}
                alt={"verify icon"}
                src={`/images/icons/medal-star.svg`}
                className="pb-1"
              />
            </>
          </div>
          <div className="flex items-center gap-0.5">
            <>
              <span>{selectedUser?.rate ? selectedUser?.rate : "0"}</span>
              <Image
                width={21}
                height={21}
                alt={"verify icon"}
                src={`/images/icons/star1.svg`}
                className="pb-1"
              />
            </>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ProjectWorkroomSelectedUser;
