import { getPublicSiteDictionary } from '@/lib/i18n'
import { getPublicSiteLanguage } from '@/lib/i18n.server'
import { DEFAULT_COMPANY_SLUG, siteFetchOrDefault } from '@/lib/api'
import type { PublicSitePageSections } from '@rentaldrivego/types'
import { resolvePageSectionsConfig } from '@/lib/pageSections'

interface BrandResponse {
  brand: {
    menuConfig?: {
      pageSections?: Partial<PublicSitePageSections> | null
    } | null
  } | null
}

export default async function BlogPage() {
  const dict = getPublicSiteDictionary(getPublicSiteLanguage())
  const brand = await siteFetchOrDefault<BrandResponse | null>(`/site/${DEFAULT_COMPANY_SLUG}/brand`, null)
  const pageSections = resolvePageSectionsConfig(brand?.brand?.menuConfig)

  return (
    <main className="min-h-screen bg-[linear-gradient(180deg,#fff, #f8fafc_35%)] py-16">
      <div className="shell space-y-10">
        {pageSections.blog.hero ? <section className="max-w-3xl">
          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">{dict.blog.eyebrow}</p>
          <h1 className="mt-4 text-5xl font-black tracking-tight text-slate-900">{dict.blog.title}</h1>
          <p className="mt-5 text-lg leading-8 text-slate-600">
            {dict.blog.description}
          </p>
        </section> : null}

        {pageSections.blog.posts ? <section className="grid gap-6 lg:grid-cols-3">
          {dict.blog.posts.map((post) => (
            <article key={post.title} className="card p-7">
              <p className="text-xs font-semibold uppercase tracking-[0.16em] text-sky-700">{post.category}</p>
              <h2 className="mt-4 text-2xl font-black tracking-tight text-slate-900">{post.title}</h2>
              <p className="mt-4 text-sm leading-7 text-slate-600">{post.excerpt}</p>
              <p className="mt-6 text-sm font-semibold text-slate-900">{dict.blog.draftPlaceholder}</p>
            </article>
          ))}
        </section> : null}
      </div>
    </main>
  )
}
