import React from 'react'
import WorldSuggestionCard from './WorldSuggestionCard'

export default function WorldChallengeSuggestionPanel({ group, busyKey, onAddFeatured, onAddSection, onPin, onDismiss, onNotRelevant, onRestore }) {
  if (!group) {
    return null
  }

  return (
    <div className="rounded-[24px] border border-sky-300/15 bg-sky-400/[0.06] p-4">
      <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
        <div>
          <div className="text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-100/80">Challenge-aware suggestions</div>
          <h3 className="mt-2 text-lg font-semibold text-white">{group.label}</h3>
          <p className="mt-1 text-sm leading-6 text-slate-300">{group.description}</p>
        </div>
        <div className="rounded-full border border-sky-300/20 bg-sky-400/10 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-sky-100">{group.count} ready</div>
      </div>

      <div className="mt-4 grid gap-4">
        {group.items.map((item) => (
          <WorldSuggestionCard
            key={item.key}
            item={item}
            busyKey={busyKey === item.key ? busyKey : ''}
            onAddFeatured={onAddFeatured}
            onAddSection={onAddSection}
            onPin={onPin}
            onDismiss={onDismiss}
            onNotRelevant={onNotRelevant}
            onRestore={onRestore}
          />
        ))}
      </div>
    </div>
  )
}