صفحهٔ موضوعِ بلاگ

"use client"

import {
  ArticleCard,
  ArticleCardBody,
  ArticleCardCategory,
  ArticleCardGrid,
  ArticleCardMedia,
  ArticleCardMeta,
  ArticleCardTitle,
} from "@/components/ui/article-card"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { formatJalali, toFaDigits } from "@/lib/persian"
import { stockImages, type StockImageName } from "@/lib/stock-images"

const POSTS: { title: string; date: string; minutes: number; cover: StockImageName; author: string; photo: StockImageName }[] = [
  { title: "قانونِ ۵۰/۳۰/۲۰ برای بودجه‌بندی ماهانه", date: "2026-10-02", minutes: 5, cover: "coverCalculator", author: "آرش نوری", photo: "personMan1" },
  { title: "پس‌اندازِ اضطراری: چقدر کافی است؟", date: "2026-09-30", minutes: 6, cover: "coverFinanceDesk", author: "سارا محمدی", photo: "personWoman2" },
  { title: "قسط یا نقد؟ حسابِ ساده‌ای که جواب می‌دهد", date: "2026-09-21", minutes: 7, cover: "coverNotebook", author: "نگار احمدی", photo: "personWoman3" },
]

/**
 * صفحهٔ یک موضوعِ بلاگ: سربرگِ رنگی با نامِ موضوع، توضیح و تعدادِ نوشته، دنبال‌کردنِ موضوع،
 * و گریدِ نوشته‌ها با کاور، نویسندهٔ عکس‌دار و زمانِ خواندن.
 */
export default function BlogTopicBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 py-10 sm:px-6">
        <header className="flex flex-col items-start gap-5 rounded-xl bg-[color-mix(in_oklab,var(--dig-green-500)_12%,var(--background))] p-8 sm:p-12">
          <span className="text-sm font-semibold text-[var(--dig-green-700)] dark:text-[var(--dig-green-300)]">موضوع</span>
          <h1 className="text-4xl font-black">مالی شخصی</h1>
          <p className="max-w-xl text-lg leading-8 text-muted-foreground">بودجه، پس‌انداز و تصمیم‌های کوچکی که آخرِ سال بزرگ می‌شوند.</p>
          <div className="flex flex-wrap items-center gap-4">
            <Button>دنبال کردنِ موضوع</Button>
            <span className="text-sm text-muted-foreground">{toFaDigits(24)} نوشته</span>
          </div>
        </header>
        <ArticleCardGrid>
          {POSTS.map((post) => (
            <ArticleCard key={post.title}>
              <ArticleCardMedia>
                {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
                <img src={stockImages[post.cover].src} alt="" loading="lazy" />
              </ArticleCardMedia>
              <ArticleCardBody>
                <ArticleCardCategory>مالی شخصی</ArticleCardCategory>
                <ArticleCardTitle href="#">{post.title}</ArticleCardTitle>
                <ArticleCardMeta>
                  <span className="flex items-center gap-2">
                    <Avatar size="sm" alt="" src={stockImages[post.photo].src} />
                    <span className="font-medium text-foreground">{post.author}</span>
                  </span>
                  <span>
                    {formatJalali(new Date(post.date), "short")} · {toFaDigits(post.minutes)} دقیقه
                  </span>
                </ArticleCardMeta>
              </ArticleCardBody>
            </ArticleCard>
          ))}
        </ArticleCardGrid>
        <Button variant="outline" className="self-center">
          نوشته‌های بیشتر
        </Button>
      </main>
    </ControlSizeProvider>
  )
}