import { IProjectCreator } from "@/types/types";
import React from "react";
import Image from "next/image";
import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
import Link from "next/link";

function ProjectCreator({ creator }: { creator: IProjectCreator }) {
  return (
    <Link
      href={`/users/${creator?.user_name}`}
      className="w-full flex items-center my-3"
    >
      {creator?.profile_image && (
        <Image
          className="rounded-2xl object-cover h-[72px] w-[72px] md:h-[120px] md:w-[120px] ml-2"
          width={120}
          height={120}
          alt={creator?.user_name}
          src={`${IMAGE_BASE_URL}${creator?.profile_image}`}
          unoptimized={true}
        />
      )}
      <div className="flex flex-col gap-1">
        <span>
          {creator?.user_type && creator?.user_type == "employer"
            ? "کارفرما"
            : "مدل"}
        </span>
        <span>
          {creator?.first_name &&
            creator?.first_name + " " + creator?.last_name}
        </span>
        <div className="flex items-center gap-1 mt-1">
          {creator?.user_name}
          {creator?.is_verified === "verified" ? (
            <Image
              width={22}
              height={22}
              alt={"verify icon"}
              src={`/images/icons/verify.svg`}
            />
          ) : creator?.is_verified === "pending" ? (
            <Image
              width={25}
              height={25}
              alt={"not-verify icon"}
              src={`/images/icons/not-verify.svg`}
            />
          ) : (
            ""
          )}
        </div>
      </div>
    </Link>
  );
}

export default ProjectCreator;
