import React from 'react'
import AchievementsList from '../../achievements/AchievementsList'

export default function TabAchievements({ achievements }) {
  const unlocked = Array.isArray(achievements?.unlocked) ? achievements.unlocked : []
  const locked = Array.isArray(achievements?.locked) ? achievements.locked : []

  return (
    <div
      id="tabpanel-achievements"
      role="tabpanel"
      aria-labelledby="tab-achievements"
      className="pt-6"
    >
      <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
        <div>
          <h2 className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Achievements</h2>
          <p className="mt-2 text-sm text-slate-300">
            Milestones, creator wins, and level-based unlocks collected on Skinbase.
          </p>
        </div>
        <div className="flex gap-3 text-xs text-slate-400">
          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
            {achievements?.counts?.unlocked || 0} unlocked
          </span>
          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
            {achievements?.counts?.total || 0} total
          </span>
        </div>
      </div>

      <AchievementsList unlocked={unlocked} locked={locked} />
    </div>
  )
}