import { urlForImage } from '@/sanity/image'
import ArticleBody from '@/modules/newsModule/components/ArticleBody'

interface NewsDetailProps {
  readonly title: string
  readonly heroImage?: any
  readonly publishedAt?: string
  readonly body?: any
}

export default function NewsDetail({ title, heroImage, publishedAt, body }: NewsDetailProps) {
  const imageBuilder = urlForImage(heroImage)
  const heroUrl = imageBuilder
    ? imageBuilder.width(1600).height(640).fit('crop').auto('format').url()
    : undefined

  const formattedDate = publishedAt
    ? new Date(publishedAt).toLocaleDateString(undefined, {
        year: 'numeric', month: 'long', day: '2-digit'
      })
    : null

  return (
    <main className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
      {/* Hero Image */}
      <div className="relative mb-6 overflow-hidden rounded-2xl border border-gray-100 shadow-sm dark:border-gray-700 dark:shadow-none">
        {heroUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img src={heroUrl} alt={title} className="h-64 w-full object-cover sm:h-80" />
        ) : (
          <div className="h-64 w-full bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800 sm:h-80" />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent" />
      </div>

      {/* Title & Meta */}
      <header className="mb-6">
        <h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
          {title}
        </h1>
        {formattedDate && (
          <p className="mt-2 text-sm text-slate-600 dark:text-slate-400">{formattedDate}</p>
        )}
      </header>

      {/* Body */}
      <ArticleBody value={body} />
    </main>
  )
}