import type { DrupalNode } from "@/lib/types"

interface NodeArticleProps {
  node: DrupalNode
}

export function NodeArticle({ node }: NodeArticleProps) {
  return (
    <article className="mx-auto max-w-4xl">
      <h1 className="mb-4 text-4xl font-bold tracking-tight text-emerald-600">
        {node.title}
      </h1>
      <div className="mb-8 flex items-center gap-3 text-sm text-slate-600">
        {node.uid?.display_name && (
          <span>By {node.uid.display_name}</span>
        )}
        <time dateTime={node.created}>
          {new Date(node.created).toLocaleDateString("en-US", {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </time>
      </div>
      {(node.body?.processed ?? node.body?.value) && (
        <div
          className="pemerald pemerald-slate max-w-none pemerald-a:text-emerald-600 pemerald-a:underline hover:pemerald-a:text-emerald-500"
          dangerouslySetInnerHTML={{
            __html: node.body.processed ?? node.body?.value ?? "",
          }}
        />
      )}
    </article>
  )
}