import React from 'react'
import AchievementCard from './AchievementCard'

export default function AchievementsList({ unlocked = [], locked = [], limitLocked }) {
  const visibleLocked = typeof limitLocked === 'number' ? locked.slice(0, limitLocked) : locked

  return (
    <div className="space-y-8">
      <section>
        <div className="mb-4 flex items-center justify-between gap-3">
          <h2 className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400">Unlocked</h2>
          <span className="text-xs text-slate-500">{unlocked.length} earned</span>
        </div>

        {unlocked.length === 0 ? (
          <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-5 py-8 text-sm text-slate-400">
            No achievements unlocked yet.
          </div>
        ) : (
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
            {unlocked.map((achievement) => (
              <AchievementCard key={achievement.id} achievement={achievement} />
            ))}
          </div>
        )}
      </section>

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

        {visibleLocked.length === 0 ? null : (
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
            {visibleLocked.map((achievement) => (
              <AchievementCard key={achievement.id} achievement={achievement} />
            ))}
          </div>
        )}
      </section>
    </div>
  )
}