import Image from "next/image";
import Link from "next/link";
import React from "react";

interface ProfileHeadRowTwoProps {
  is_self: boolean | null;
  adTotalRatings: number | null;
  adAverageRating: number | null;
  id: string | null;
}

function AdProfileHeadRowTwo({
  is_self,
  adTotalRatings,
  adAverageRating,
  id,
}: ProfileHeadRowTwoProps) {

  
  return (
    <div className="px-4 py-2 grid w-full grid-cols-2 items-end text-xs md:text-sm font-semibold justify-between">
      <div className="flex items-center gap-5">
        <div className="flex items-center">
          <>
            <span>{adAverageRating ? adAverageRating : "0"}</span>
            <Image
              width={22}
              height={22}
              alt={"verify icon"}
              src={`/images/icons/star1.svg`}
            />
          </>
        </div>
        <div className="flex items-center justify-center">
          <>
            <span>{adTotalRatings ? adTotalRatings : "0"}</span>
            <Image
              width={22}
              height={22}
              alt={"verify icon"}
              src={`/images/icons/medal-star.svg`}
            />
          </>
        </div>
      </div>
      <div className="flex flex-col items-end pl-2">
        {is_self ? (
          <Link href={`/settings/my-billboards/profile/${id}`}>
            <Image
              width={22}
              height={22}
              alt={"verify icon"}
              src={`/images/icons/edit.svg`}
              className="dark:invert"
            />
          </Link>
        ) : (
          ""
        )}
      </div>
    </div>
  );
}

export default AdProfileHeadRowTwo;
