'use client'

import Image from 'next/image'
import type { AiChatRankOutput } from '@/services/home/types'
import { formatNumberToKMB } from '@/lib/utils'
import Link from 'next/link'

interface MostChatItemProps {
  character: AiChatRankOutput
  onClick?: () => void
}

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

          {/* 信息区域 */}
          <div
            className="flex flex-1 flex-col justify-between p-4"
            style={{
              background:
                'linear-gradient(42.5deg, rgba(82, 113, 196, 0) 43.1%, rgba(177, 159, 255, 0.3) 78.36%, #ECA1FE 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 text-txt-secondary-normal mt-2 line-clamp-2">
                {character.introduction}
              </p>
            </div>

            {/* 消息数统计 */}
            <div className="flex items-center gap-1">
              <i className="iconfont icon-Chat !text-[12px]" />
              <div className="txt-numMonotype-s">{formatNumberToKMB(character.chatNum || 0)}</div>
            </div>
          </div>
        </div>
      </div>
    </Link>
  )
}

export default MostChatItem
