"use client";

import LargeRankCard from "./LargeRankCard";
import SmallRankCard from "./SmallRankCard";
import { AiChatRankOutput, AiHeartbeatRankOutput, AiGiftRankOutput } from "@/services/home/types";
import { RankType } from "@/types/global";

interface TopHeaderProps {
  rankData: AiChatRankOutput[] | AiHeartbeatRankOutput[] | AiGiftRankOutput[];
  rankType: RankType;
  isLoading?: boolean;
}

export default function TopHeader({ rankData, rankType, isLoading }: TopHeaderProps) {
  if (isLoading) {
    return (
      <div className="max-w-[624px] mx-auto mt-6">
        <div className="flex items-center gap-4 w-full">
          <div className="flex-1 py-12">
            <div className="w-full aspect-[240/360] rounded-b-lg bg-surface-nest-normal animate-pulse" />
          </div>
          <div className="w-[38.5%] aspect-[240/360] rounded-b-lg bg-surface-nest-normal animate-pulse" />
          <div className="flex-1 py-12">
            <div className="w-full aspect-[240/360] rounded-b-lg bg-surface-nest-normal animate-pulse" />
          </div>
        </div>
      </div>
    );
  }

  if (!rankData || rankData.length === 0) {
    return (
      <div className="max-w-[624px] mx-auto mt-6">
        <div className="flex justify-center items-center h-64">
          <div className="text-txt-secondary-normal">No leaderboard data yet</div>
        </div>
      </div>
    );
  }

  // 获取前3名数据
  const topThree = rankData.slice(0, 3);
  const firstPlace = topThree[0];
  const secondPlace = topThree[1];
  const thirdPlace = topThree[2];

  return (
    <div className="max-w-[624px] mx-auto mt-6">
      <div className="flex items-center gap-4 w-full">
        {/* 第二名 */}
        <SmallRankCard 
          item={secondPlace} 
          rankType={rankType} 
          rank={2}
        />
        
        {/* 第一名 */}
        <LargeRankCard 
          item={firstPlace} 
          rankType={rankType} 
        />
        
        {/* 第三名 */}
        <SmallRankCard 
          item={thirdPlace} 
          rankType={rankType} 
          rank={3}
        />
      </div>
    </div>
  );
}