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 }) {
  return (
    <Link
      href={`/users/${user?.user_name}`}
      className="w-full max-w-md mx-auto flex items-center"
    >
      <UserInfo
        first_name={user?.first_name}
        is_verified={user?.verify_badge}
        userId={user?._id}
        profile_image={user?.profile_image}
        user_level={user?.user_level}
        last_name={user?.last_name}
        user_name={user?.user_name}
        noLink
        trailingContent={
          <span className="flex shrink-0 items-center gap-2 text-[11px] font-normal text-neutral-500 dark:text-neutral-400">
            <span className="flex items-center gap-0.5">
              <span className="pt-[6px] text-sm leading-none">{user?.user_score ? user?.user_score : "0"}</span>
              <Image width={16} height={16} alt="star icon" src="/images/icons/star1.png" />
            </span>
            <span className="flex items-center gap-0.5">
              <span className="pt-[6px] text-sm leading-none">{user?.rate ? user?.rate : "0"}</span>
              <Image width={16} height={16} alt="rate icon" src="/images/icons/medal-star.png" />
            </span>
          </span>
        }
      />
    </Link>
  );
}

export default SearchCard;
