import React from 'react'
import LeaderboardItem from './LeaderboardItem'

export default function LeaderboardList({ items = [], type }) {
  const podium = items.slice(0, 3)
  const rest = items.slice(3)

  return (
    <div className="space-y-8">
      {podium.length > 0 ? (
        <section>
          <div className="mb-4 flex items-center justify-between gap-3">
            <h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-slate-400">Top 3</h2>
            <span className="text-xs text-slate-500">Podium leaders</span>
          </div>
          <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
            {podium.map((item) => (
              <LeaderboardItem key={`${type}-${item.rank}`} item={item} type={type} highlight />
            ))}
          </div>
        </section>
      ) : null}

      <section>
        <div className="mb-4 flex items-center justify-between gap-3">
          <h2 className="text-sm font-semibold uppercase tracking-[0.24em] text-slate-400">Leaderboard</h2>
          <span className="text-xs text-slate-500">{items.length} ranked entries</span>
        </div>

        {items.length === 0 ? (
          <div className="rounded-3xl border border-white/10 bg-white/[0.03] px-6 py-10 text-sm text-slate-400">
            No leaderboard entries available yet for this period.
          </div>
        ) : (
          <div className="space-y-4">
            {rest.map((item) => (
              <LeaderboardItem key={`${type}-${item.rank}`} item={item} type={type} />
            ))}
          </div>
        )}
      </section>
    </div>
  )
}