crush-level-web/src/app/(main)/home/components/MostCrush/MostCrushItem.tsx

"use client";

import Image from "next/image";
import type { AiHeartbeatRankOutput } from "@/services/home/types";
import Link from "next/link";

interface MostCrushItemProps {
  character: AiHeartbeatRankOutput;
  onClick?: () => void;
}

const MostCrushItem = ({ character, onClick }: MostCrushItemProps) => {

  return (
    <Link href={`/chat/${character.aiId}`} prefetch className="flex-[0_0_100%] sm:flex-[0_0_calc(50%-12px)] lg:flex-[0_0_calc(50%-16px)] xl:flex-[0_0_calc(33.333%-16px)] min-w-0 h-full">
      <div 
        onClick={onClick}
        className="relative rounded-lg overflow-hidden bg-surface-base-normal cursor-pointer transition-transform duration-300 border border-solid border-outline-normal"
      >
        <div className="flex items-stretch">
          {/* 头像 */}
          <div className="relative aspect-[111/148] w-[30%] flex-shrink-0">
            <Image
              src={character.homeImageUrl || ""}
              alt={character.nickname || "Character"}
              fill
              className="object-cover object-top"
            />
          </div>

          {/* 信息区域 */}
          <div className="flex-1 flex flex-col justify-between p-4" style={{ background: "linear-gradient(42.5deg, rgba(194, 65, 230, 0) 43.1%, rgba(242, 100, 164, 0.3) 78.36%, rgba(236, 161, 254, 0.6) 116.57%)" }}>
            <div>
              <h3 className="txt-title-s flex items-baseline">
                <span className="truncate">{character.nickname}</span>
                {/* {age && <span className="flex-shrink-0">, {age}</span>} */}
              </h3>
              <p className="txt-body-m line-clamp-2 text-txt-secondary-normal mt-2">
                {character.introduction}
              </p>
            </div>

            {/* 心动值统计 */}
            <div className="flex items-center gap-1">
              <Image src="/icons/icon-crush.svg" alt="" width={12} height={12} />
              <div className="txt-numMonotype-s">{character.heartbeatValTotal || 0}℃</div>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default MostCrushItem;