import { User } from "@/types/types";
import React from "react";
import UserInfo from "../main/UserInfo";
import Image from "next/image";
import Link from "next/link";

function SearchCard({ user }: { user: User }) {
  console.log(user);

  return (
    <Link
      href={`/users/${user?.user_name}`}
      className="w-full max-w-md mx-auto flex items-end"
    >
      <UserInfo
        first_name={user?.first_name}
        is_verified={user?.is_verified}
        profile_image={user?.profile_image}
        user_level={user?.user_level}
        last_name={user?.last_name}
        user_name={user?.user_name}
        noLink
      />
      <div className="flex items-center justify-center gap-0.5">
        <>
          <span>{user?.user_score ? user?.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>{user?.rate ? user?.rate : "0"}</span>
          <Image
            width={21}
            height={21}
            alt={"verify icon"}
            src={`/images/icons/star1.svg`}
            className="pb-1"
          />
        </>
      </div>
    </Link>
  );
}

export default SearchCard;
