import { prisma } from '@/lib/db'
import { notFound } from 'next/navigation'
import Link from 'next/link'
import { UtensilsCrossed, ArrowLeft } from 'lucide-react'

export default async function PublicCmsPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params

  const page = await prisma.cmsPage.findUnique({
    where: { slug },
  })

  if (!page || !page.isPublished) {
    notFound()
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white border-b border-gray-200">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 py-4 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2">
            <UtensilsCrossed className="w-7 h-7 text-primary-600" />
            <span className="text-lg font-bold text-gray-900">RestoMenu</span>
          </Link>
          <Link href="/" className="text-sm text-gray-600 hover:text-gray-900 flex items-center gap-1">
            <ArrowLeft className="w-4 h-4" /> Kembali
          </Link>
        </div>
      </header>

      {/* Content */}
      <main className="max-w-4xl mx-auto px-4 sm:px-6 py-12">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">{page.title}</h1>
        <div
          className="prose prose-gray max-w-none
            prose-headings:text-gray-900 prose-headings:font-semibold
            prose-h2:text-2xl prose-h2:mt-8 prose-h2:mb-4
            prose-h3:text-xl prose-h3:mt-6 prose-h3:mb-3
            prose-p:text-gray-600 prose-p:leading-relaxed prose-p:mb-4
            prose-li:text-gray-600
            prose-a:text-primary-600 prose-a:no-underline hover:prose-a:underline
            prose-strong:text-gray-900"
          dangerouslySetInnerHTML={{ __html: page.content }}
        />
        <div className="mt-12 pt-8 border-t border-gray-200 text-center text-sm text-gray-500">
          Terakhir diperbarui: {new Date(page.updatedAt).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-200 mt-12">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 py-6 text-center text-sm text-gray-500">
          &copy; {new Date().getFullYear()} RestoMenu. All rights reserved.
        </div>
      </footer>
    </div>
  )
}