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

export default function ForumSection({ category, boards = [] }) {
  const name = category?.name ?? 'Forum Section'
  const description = category?.description
  const preview = category?.preview_image ?? '/images/forum/default.jpg'

  const breadcrumbs = [
    { label: 'Home', href: '/' },
    { label: 'Forum', href: '/forum' },
    { label: name },
  ]

  return (
    <div className="mx-auto max-w-6xl px-4 pb-20 pt-10 sm:px-6 lg:px-8">
      <Breadcrumbs items={breadcrumbs} />

      <section className="mt-5 overflow-hidden rounded-3xl border border-white/10 bg-nova-800/55 shadow-xl backdrop-blur">
        <div className="relative h-56 overflow-hidden sm:h-64">
          <img src={preview} alt={`${name} preview`} className="h-full w-full object-cover object-center" />
          <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-transparent" />
          <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8">
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-cyan-200/85">Forum Section</p>
            <h1 className="mt-2 text-3xl font-black text-white sm:text-4xl">{name}</h1>
            {description && <p className="mt-2 max-w-3xl text-sm text-white/70 sm:text-base">{description}</p>}
          </div>
        </div>
      </section>

      <section className="mt-8 rounded-2xl border border-white/8 bg-nova-800/45 p-5 backdrop-blur sm:p-6">
        <div className="flex items-end justify-between gap-3">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.16em] text-white/40">Subcategories</p>
            <h2 className="mt-1 text-2xl font-bold text-white">Browse boards</h2>
          </div>
          <p className="text-xs text-white/45 sm:text-sm">Select a board to open its thread list.</p>
        </div>

        {boards.length === 0 ? (
          <div className="py-12 text-center text-sm text-white/45">No boards are available in this section yet.</div>
        ) : (
          <div className="mt-5 grid gap-4 md:grid-cols-2">
            {boards.map((board) => (
              <a key={board.id ?? board.slug} href={`/forum/${board.slug}`} className="rounded-2xl border border-white/8 bg-white/[0.02] p-5 transition hover:border-cyan-400/25 hover:bg-white/[0.04]">
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <h3 className="text-lg font-semibold text-white">{board.title}</h3>
                    {board.description && <p className="mt-2 text-sm text-white/55">{board.description}</p>}
                  </div>
                  <span className="rounded-full border border-cyan-300/20 bg-cyan-300/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-cyan-200">
                    Open
                  </span>
                </div>

                <div className="mt-4 flex flex-wrap gap-4 text-xs text-white/50">
                  <span>{board.topics_count ?? 0} topics</span>
                  <span>{board.posts_count ?? 0} posts</span>
                  {board.latest_topic?.title && <span>Latest: {board.latest_topic.title}</span>}
                </div>
              </a>
            ))}
          </div>
        )}
      </section>
    </div>
  )
}