import Image from "next/image";
import { PageShell } from "../../components";
import { getBlog } from "../../meshkee";
import { blogCanonicalPath, pageMetadata } from "../../seo";

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const blog = await getBlog(slug);
  return pageMetadata({
    title: blog.title,
    description: (blog.abstract || "مقاله آموزشی آریا شبکه پیشرو درباره تجهیزات سرور و شبکه.").slice(0, 160),
    path: blogCanonicalPath(blog),
    image: blog.image
  });
}

export default async function BlogDetailPage({ params }) {
  const { slug } = await params;
  const blog = await getBlog(slug);

  return (
    <PageShell>
      <article className="section blog-detail">
        <div className="container blog-detail-inner">
          <div className="blog-detail-image">
            <Image src={blog.image} alt={blog.title} fill sizes="(max-width: 900px) 100vw, 900px" />
          </div>
          <time>{blog.date}</time>
          <h1>{blog.title}</h1>
          <p className="blog-abstract">{blog.abstract}</p>
          <div className="rich-text" dangerouslySetInnerHTML={{ __html: blog.html || `<p>${blog.abstract}</p>` }} />
        </div>
      </article>
    </PageShell>
  );
}