import type { ReactNode } from "react"

type AdminSectionPlaceholderProps = {
  feature: string
  summary: string
  requiredPermission: string
  nextSteps: string[]
  children?: ReactNode
}

export function AdminSectionPlaceholder({
  feature,
  summary,
  requiredPermission,
  nextSteps,
  children,
}: AdminSectionPlaceholderProps) {
  return (
    <section className="space-y-5 rounded-xl border border-neutral-200 p-6">
      <div className="space-y-2">
        <h2 className="text-xl font-medium">{feature}</h2>
        <p className="text-sm text-neutral-600">{summary}</p>
        <p className="text-xs uppercase tracking-wide text-neutral-500">
          Required permission: {requiredPermission}
        </p>
      </div>

      {children}

      <div className="rounded-lg border border-neutral-200 bg-neutral-50 p-4">
        <p className="text-sm font-medium text-neutral-800">Planned next steps</p>
        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-neutral-600">
          {nextSteps.map((step) => (
            <li key={step}>{step}</li>
          ))}
        </ul>
      </div>
    </section>
  )
}