import React from 'react'
import CategoryCard from '../../components/forum/CategoryCard'

export default function ForumIndex({ categories = [] }) {
  return (
    <div className="px-4 pt-10 pb-20 sm:px-6 lg:px-8 max-w-5xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <p className="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Community</p>
        <h1 className="text-3xl font-bold text-white leading-tight">Forum</h1>
        <p className="mt-1.5 text-sm text-white/50">Browse forum sections and join the conversation.</p>
      </div>

      {/* Category grid */}
      {categories.length === 0 ? (
        <div className="rounded-2xl border border-white/[0.06] bg-nova-800/50 p-12 text-center">
          <svg className="mx-auto mb-4 text-zinc-600" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
            <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
          </svg>
          <p className="text-sm text-zinc-500">No forum categories available yet.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
          {categories.map((cat) => (
            <CategoryCard key={cat.id ?? cat.slug} category={cat} />
          ))}
        </div>
      )}
    </div>
  )
}