مقالهٔ مینیمال

"use client"

import * as React from "react"

import { CheckIcon, LinkIcon } from "@/components/icons"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { stockImages } from "@/lib/stock-images"

/**
 * مقالهٔ متنی مینیمال: بدونِ کاور، تیتر و نویسنده در بالا، متن با فونتِ بزرگ و خطِ بلند برای
 * خواندنِ راحت، و در پایان کارتِ نویسنده با «کپی لینک» که نتیجه را روی خودِ دکمه نشان می‌دهد.
 */
export default function ArticleMinimalBlock() {
  const [copied, setCopied] = React.useState(false)

  return (
    <ControlSizeProvider size="xl" asChild>
      <article className="mx-auto flex w-full max-w-[40rem] flex-col gap-10 px-4 py-16 sm:px-6">
        <header className="flex flex-col gap-6">
          <span className="text-sm text-muted-foreground">۸ مهر ۱۴۰۵ · ۵ دقیقه</span>
          <h1 className="text-4xl leading-snug font-black text-balance">چرا دفترچهٔ خرج هیچ‌وقت پر نمی‌شود</h1>
          <div className="flex items-center gap-3">
            <Avatar alt="" src={stockImages.personMan1.src} />
            <span className="flex flex-col">
              <span className="text-sm font-semibold">آرش نوری</span>
              <span className="text-xs text-muted-foreground">نویسندهٔ مالی شخصی</span>
            </span>
          </div>
        </header>
        <div className="flex flex-col gap-6 text-lg leading-9">
          <p>همهٔ ما یک بار دفترچه خریده‌ایم که خرج‌ها را بنویسیم. هفتهٔ اول پر شد، هفتهٔ دوم نیمه، و بعد کنارِ کتاب‌ها خاک خورد.</p>
          <p className="text-muted-foreground">مشکل اراده نیست؛ مشکل این است که نوشتنِ هر خرج کارِ اضافه است و پاداشش دیر می‌رسد. راه‌حل این است که کار را حذف کنی، نه این‌که بیشتر تلاش کنی.</p>
          <h2 className="mt-4 text-2xl font-bold">سه قدمِ کوچک</h2>
          <ol className="flex list-decimal flex-col gap-3 ps-6 text-muted-foreground marker:font-bold marker:text-foreground">
            <li>خرج‌ها را خودکار از بانک بگیر، نه دستی.</li>
            <li>فقط سه دسته داشته باش: لازم، خوب، زیادی.</li>
            <li>هفته‌ای یک بار، فقط پنج دقیقه نگاه کن.</li>
          </ol>
        </div>
        <footer className="flex flex-wrap items-center justify-between gap-4 rounded-xl bg-subtle p-5">
          <span className="flex items-center gap-3">
            <Avatar alt="" src={stockImages.personMan1.src} />
            <span className="flex flex-col">
              <span className="font-semibold">آرش نوری</span>
              <span className="text-sm text-muted-foreground">۴۲ نوشته</span>
            </span>
          </span>
          <Button
            variant="outline"
            className="bg-card"
            onClick={() => {
              void navigator.clipboard?.writeText(window.location.href)
              setCopied(true)
              window.setTimeout(() => setCopied(false), 2000)
            }}
          >
            {copied ? <CheckIcon /> : <LinkIcon />}
            {copied ? "لینک کپی شد" : "کپی لینک"}
          </Button>
        </footer>
      </article>
    </ControlSizeProvider>
  )
}