crush-level-web/src/app/(main)/profile/components/CharacterCard.tsx

import { Tag } from '@/components/ui/tag'
import { cn, formatNumberToKMB } from '@/lib/utils'
import { AIPermission, AiUserBaseListOutput } from '@/services/create'
import Image from 'next/image'
import Link from 'next/link'

const CharacterCard = ({
  character,
  isHovered,
  onHover,
}: {
  character: AiUserBaseListOutput
  isHovered: boolean
  onHover: (hovered: boolean) => void
}) => {
  // 根据权限判断是否私密
  const isPrivate = character.permission === AIPermission.Private

  return (
    <Link href={`/@${character.aiId}`}>
      <div
        className="group flex w-full min-w-[200px] grow basis-0 flex-col gap-3"
        onMouseEnter={() => onHover(true)}
        onMouseLeave={() => onHover(false)}
      >
        {/* 角色图片 */}
        <div
          className="relative overflow-hidden rounded-lg bg-cover bg-center bg-no-repeat pb-[133%]"
          style={
            {
              // backgroundImage: character.homeImageUrl ? `url('${character.homeImageUrl}')` : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
            }
          }
        >
          <Image
            src={character.homeImageUrl ?? ''}
            alt={character.nickname ?? ''}
            fill
            className="object-cover object-top"
            sizes="100%"
          />

          {/* 私密标识 */}
          <div className="bg-surface-element-dark-normal absolute top-2 right-2 z-[1] flex h-6 w-6 items-center justify-center rounded-xs backdrop-blur-xs">
            <i
              className={cn('iconfont !text-[12px]', {
                'icon-eye-off': isPrivate,
                'icon-eye-on': !isPrivate,
              })}
            />
          </div>

          {/* 底部遮罩层 */}
          <div
            className={cn(
              'absolute right-0 bottom-0 left-0 flex flex-col justify-end bg-gradient-to-b from-transparent to-black px-3 pb-3',
              {
                'pt-6': !isHovered,
                'h-full pt-12': isHovered,
              }
            )}
          >
            {/* 描述文字 - hover时显示，带过渡动效 */}
            <div
              className={cn(
                'txt-body-m mb-2 line-clamp-6 transform overflow-hidden text-white transition-all duration-300 ease-in-out',
                {
                  'max-h-0 opacity-0': !isHovered,
                  'h-full max-h-max opacity-100': isHovered,
                }
              )}
            >
              {character.introduction || ''}
            </div>

            {/* 点赞数 - 暂时用固定值，实际应该从API获取 */}
            <div className="flex h-6 items-center gap-1 px-1 py-0.5">
              {/* <img src={likeIcon} alt="点赞" className="w-3 h-3" /> */}
              <i className="iconfont icon-Like-fill" />
              <span className="text-xs font-medium text-white">
                {formatNumberToKMB(character.likedNum ?? 0)}
              </span>
            </div>
          </div>
        </div>

        {/* 角色信息 */}
        <div className="flex flex-col gap-2">
          {/* 角色名称 */}
          <div className="txt-title-m truncate">{character.nickname}</div>

          {/* 标签 */}
          <div className="flex flex-wrap gap-1">
            {/* 性格标签 */}
            {character.characterName && <Tag size="small">{character.characterName}</Tag>}

            {/* 标签 */}
            {character.tagName && <Tag size="small">{character.tagName}</Tag>}
          </div>
        </div>
      </div>
    </Link>
  )
}

export default CharacterCard