"use client";

import React from "react";
import { useRouter } from "next/navigation";
import OwnImage from "../OwnImage";
import OwnIcon from "../OwnIcon";
export default function FoundItem({ data = {} }) {
  const router = useRouter();
  return (
    <div
      onClick={() => {
        router.push("/profile/" + data.mid);
      }}
    >
      <div className="h-max flex items-center mb-3">
        <OwnImage
          className="flex-none w-12 h-12 rounded-full"
          outClassName="flex-none w-12 h-12 rounded-full mr-1"
          roundedFull
          src={data?.avatar.images[0].urls[0]}
        />
        <div className="flex flex-col ml-2 items-start">
          <div className="flex items-center">
            <span className="text-base font-medium text-white">
              {data?.name}
            </span>
            <div className="flex py-0.5 px-1 rounded-full items-center ml-1 bg-[#FFFFFF26]">
              {data?.gender === 1 ? (
                <OwnIcon
                  src="/icons/info/male.png"
                  className="w-[14px] h-[14px]"
                  outClassName="mr-1"
                />
              ) : (
                <OwnIcon
                  src="/icons/info/female.png"
                  className="w-[14px] h-[14px]"
                  outClassName="mr-1"
                />
              )}
              <span className="text-xs">{data?.age}岁</span>
            </div>
            <div className="flex py-0.5 px-1 rounded-full items-center ml-1 bg-[#FFFFFF26]">
              <OwnIcon
                src="/icons/info/location.png"
                className="w-[14px] h-full"
                outClassName="mr-1"
              />
              <span className="text-xs">{data?.city}</span>
            </div>
          </div>
          <span className="text-xs text-[#FFFFFF80]">
            全网粉丝：{data?.fans}万
          </span>
        </div>
      </div>
      <div className="grid grid-cols-2 grid-rows-[16rem] rounded-2xl overflow-hidden h-64">
        <div className="rounded-r overflow-hidden">
          <OwnImage
            src={data?.cover?.images[0]?.urls[0]}
            className="w-full h-full"
            outClassName="w-full h-full"
          />
        </div>
        <div className="grid grid-rows-2 ml-1 gap-1">
          {data?.album?.images.map((item, index) => {
            if (index > 1) return;
            return (
              <div key={index} className="w-full h-full mb-1 relative">
                <OwnImage
                  src={item?.urls[0]}
                  className="w-full h-full"
                  outClassName="w-full h-full"
                  rounded="rounded-l"
                />
                {index === 1 && data?.album?.images.length > 2 && (
                  <div className="flex items-center justify-center absolute top-0 w-full h-full bg-[rgba(0,0,0,0.5)]">
                    <span className="text-3xl font-semibold">
                      +{data?.album?.images.length - 2}
                    </span>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
      {/* 下方标签区 */}
      <div className="flex h-12 justify-between items-center">
        <div className="flex gap-2">
          {data?.is_active_within_a_week === 1 && (
            <OwnIcon src="/images/space_new.png" className="h-6" />
          )}
          {data?.tag?.map((item, index) => {
            if (index > 2) return;
            if (data?.is_active_within_a_week === 1 && index > 1) return;
            return (
              <div
                key={index}
                className="px-2 rounded-full bg-[#FF61B030] flex items-center"
              >
                <span className="text-[#FF669E] text-[11px]">{item}</span>
              </div>
            );
          })}
        </div>
        <div className="flex flex-nowrap gap-2">
          {data?.platforms?.map((item, index) => {
            if (index > 5) return;
            return (
              <div key={index} className="flex">
                {index < 5 && (
                  <OwnImage
                    src={item?.icon?.images[0]?.urls[0]}
                    className="w-full h-[18px]"
                  />
                )}
                {index === 5 && (
                  <div className="flex items-center justify-center w-full h-full rounded bg-[rgba(0,0,0,0.5)]">
                    <span className="text-xs font-semibold">
                      +{data?.platforms.length - 5}
                    </span>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
      {/* 分割线 */}
      <div className="h-[3px] rounded-full bg-[#FFFFFF26] mb-3"></div>
    </div>
  );
}