import React from 'react'
import Image from 'next/image'
import { getNews } from '@/lib/main/fetchNews'
import { notFound } from 'next/navigation'

interface PageProps {
  params: Promise<{
    slug: string
  }>
}

async function getNewsItem(slug: string) {
  const news = await getNews()
  return news.find(item => item.slug === slug)
}

export default async function NewsPage({ params }: PageProps) {
  const { slug } = await params
  const newsItem = await getNewsItem(slug)

  if (!newsItem) {
    notFound()
  }

  return (
    <article className="mx-auto max-w-5xl px-4 py-8">
      <div className="w-full overflow-hidden rounded-2xl bg-white shadow-lg">
        <div className="relative h-[400px] w-full">
          <Image
            src={
              newsItem.titleImage.startsWith('http')
                ? newsItem.titleImage
                : `http://127.0.0.1:8000${newsItem.titleImage}` || '/placeholder-image.jpg'
            }
            alt={newsItem.title}
            fill
            className="object-cover"
            priority
            sizes="(max-width: 1280px) 100vw, 1280px"
          />
          <div className="absolute inset-0 flex items-center justify-center bg-black/40">
            <h1 className="px-4 text-center text-4xl font-bold text-white md:text-5xl">
              {newsItem.title}
            </h1>
          </div>
        </div>
      </div>

      <div className="prose prose-lg mt-8 max-w-none">
        <div className="whitespace-pre-wrap">{newsItem.content}</div>
      </div>
    </article>
  )
}