جزئیاتِ کالای مینیمال

"use client"

import * as React from "react"

import { AddToCart } from "@/components/ui/add-to-cart"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { formatCurrency } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

/**
 * جزئیاتِ کالای مینیمال: عکسِ بزرگِ تمام‌عرض روی سطحِ subtle، و زیرش در یک ستونِ باریک نام،
 * یک جملهٔ توصیف، قیمت، تعداد و دکمهٔ سبد. برای فروشگاه‌های تک‌محصولی و برندهای ساده.
 */
export default function ProductDetailMinimalBlock() {
  const [quantity, setQuantity] = React.useState(0)

  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="flex w-full flex-col">
        <div className="bg-subtle">
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img src={stockImages.productVase.src} alt={stockImages.productVase.alt} className="mx-auto aspect-[4/3] max-h-[34rem] w-full max-w-5xl object-cover sm:aspect-[16/9]" />
        </div>
        <section className="mx-auto flex w-full max-w-xl flex-col items-center gap-6 px-4 py-14 text-center sm:px-6">
          <div className="flex flex-col gap-3">
            <h1 className="text-3xl font-bold">گلدانِ دوقلو</h1>
            <p className="leading-8 text-muted-foreground">دو گلدانِ سرامیکی دست‌ساز با لعابِ مات؛ یکی برای گل، یکی برای خالی‌ماندن.</p>
          </div>
          <span className="text-2xl font-black tabular-nums">{formatCurrency(1_290_000 * Math.max(1, quantity))}</span>
          <div className="mt-2 flex w-full flex-col gap-3 sm:flex-row">
            <AddToCart variant="default" fullWidth itemName="گلدانِ دوقلو" max={5} quantity={quantity} onQuantityChange={setQuantity} />
          </div>
          <p className="text-sm text-muted-foreground">ارسالِ رایگان · بازگشت تا ۷ روز</p>
        </section>
      </main>
    </ControlSizeProvider>
  )
}