'use client'

const MostGiftedItemSkeleton = () => {
  return (
    <div className="h-full min-w-0 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)]">
      <div className="bg-surface-base-normal relative animate-pulse overflow-hidden rounded-lg">
        <div className="flex items-stretch">
          {/* 头像骨架 */}
          <div className="bg-surface-element-normal relative aspect-[111/148] w-[30%] flex-shrink-0" />

          {/* 信息区域骨架 */}
          <div className="flex flex-1 flex-col justify-between p-4">
            <div>
              {/* 名字骨架 */}
              <div className="bg-surface-element-normal mb-2 h-5 w-2/3 rounded" />

              {/* 简介骨架 */}
              <div className="mt-2 space-y-2">
                <div className="bg-surface-element-normal h-4 w-full rounded" />
                <div className="bg-surface-element-normal h-4 w-4/5 rounded" />
              </div>
            </div>

            {/* 礼物值统计骨架 */}
            <div className="mt-4 flex items-center gap-1">
              <div className="bg-surface-element-normal h-3 w-3 rounded" />
              <div className="bg-surface-element-normal h-4 w-12 rounded" />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const MostGiftedSkeleton = () => {
  return (
    <div className="flex gap-6">
      {/* 默认显示3个骨架屏 */}
      {[1, 2, 3].map((i) => (
        <MostGiftedItemSkeleton key={i} />
      ))}
    </div>
  )
}

export default MostGiftedSkeleton
