"use client";

import Image from "next/image";
import type { AiGiftRankOutput } from "@/services/home/types";
import { calculateAgeByBirthday, formatNumberToKMB } from "@/lib/utils";
import Link from "next/link";

interface MostGiftedItemProps {
  character: AiGiftRankOutput;
  onClick?: () => void;
}

const MostGiftedItem = ({ character, onClick }: MostGiftedItemProps) => {

  const age = calculateAgeByBirthday(character.birthday);

  return (
    <Link href={`/chat/${character.aiId}`} 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(230, 137, 65, 0) 43.1%, rgba(255, 151, 47, 0.3) 78.36%, rgba(255, 217, 0, 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/diamond.svg" alt="" width={12} height={12} />
              <div className="txt-numMonotype-s">{formatNumberToKMB(Math.floor((character.giftCoinNum || 0) / 100))}</div>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default MostGiftedItem;