import Link from 'next/link';
import { ArrowUpLeft } from 'lucide-react';
import { PageHeading } from '../../components/common';
import { faSlug, getBlogs, imageUrlOf, plainText, titleOf } from '../../lib/meshkee-api';

export const metadata = { title: 'بلاگ معماری و طراحی داخلی', description: 'مقاله‌ها و نوشته‌های گروه معماری ساناز گودرزی دربارهٔ معماری، طراحی داخلی، طراحی نما و فضای سبز.', alternates:{canonical:'/blog/'} };
export default async function BlogPage() {
  const posts = await getBlogs();
  return <><PageHeading title="بلاگ" en="BLOG"/><section className="container editorial-list">
    {!posts.length && <div className="empty-content"><div className="empty-thumbnail" aria-hidden="true"/><h2>مقاله‌ها به‌زودی منتشر می‌شوند</h2><p>این بخش به API بلاگ متصل است و پس از انتشار نخستین مطلب، محتوای واقعی همین‌جا نمایش داده می‌شود.</p></div>}
    <div className="editorial-grid">{posts.map((post) => { const title=titleOf(post,'مقالهٔ معماری'); const image=imageUrlOf(post)||'/img/subheader/bg.jpg'; return <article key={post.id}><Link href={`/blog/${post.id}/${faSlug(title)}/`}><div className="editorial-image"><img src={image} alt={title} loading="lazy"/></div><small>{post.categoryName||'بلاگ معماری'}</small><h2>{title}</h2>{(post.abstract||post.summary)&&<p>{plainText(post.abstract||post.summary)}</p>}<span>ادامه مطلب <ArrowUpLeft size={18}/></span></Link></article>})}</div>
  </section></>;
}