"use client";

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

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

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

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

export default MostCrushSkeleton;









