خریدِ سریع

"use client"

import * as React from "react"

import { CreditCardIcon, TruckIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { formatCurrency } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

/**
 * خریدِ سریع برای مشتری برگشتی: همهٔ انتخاب‌ها از خریدِ قبل پر شده و هر ردیف (نشانی، ارسال،
 * پرداخت) با «تغییر» قابلِ عوض‌کردن است؛ یک دکمهٔ بزرگ برای پرداخت. کمترین قدم تا خرید.
 */
export default function CheckoutExpressBlock() {
  const [paying, setPaying] = React.useState(false)
  const rows = [
    { icon: <TruckIcon />, label: "ارسال به", value: "خانه · تهران، ولیعصر، کوچهٔ نسترن، پلاک ۱۲" },
    { icon: <TruckIcon />, label: "روشِ ارسال", value: "پیکِ امروز · ۹۰٬۰۰۰ تومان" },
    { icon: <CreditCardIcon />, label: "پرداخت", value: "کیف پول · موجودی ۴۸ میلیون" },
  ]
  const total = 1_290_000 + 90_000

  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="mx-auto flex w-full max-w-lg flex-col gap-8 p-4 py-10 sm:p-6">
        <header className="flex flex-col gap-1">
          <h1 className="text-2xl font-bold">خریدِ سریع</h1>
          <p className="text-muted-foreground">با اطلاعاتِ خریدِ قبلی‌ات پر شده؛ هر کدام را خواستی عوض کن.</p>
        </header>
        <div className="flex items-center gap-4 rounded-xl bg-subtle p-4">
          {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
          <img src={stockImages.productVase.src} alt="" className="size-16 rounded-lg object-cover" />
          <span className="flex flex-1 flex-col">
            <span className="font-medium">گلدانِ سرامیکی دوقلو</span>
            <span className="text-sm text-muted-foreground">کرم · ۱ عدد</span>
          </span>
          <span className="font-bold tabular-nums">{formatCurrency(1_290_000)}</span>
        </div>
        <ul className="flex flex-col divide-y divide-border rounded-xl border border-border bg-card">
          {rows.map((row) => (
            <li key={row.label} className="flex items-center gap-3 p-4">
              <span aria-hidden className="text-muted-foreground [&>svg]:size-5">
                {row.icon}
              </span>
              <span className="flex min-w-0 flex-1 flex-col">
                <span className="text-xs text-muted-foreground">{row.label}</span>
                <span className="truncate text-sm font-medium">{row.value}</span>
              </span>
              <Button variant="ghost">تغییر</Button>
            </li>
          ))}
        </ul>
        <div className="flex flex-col gap-3 pt-4">
          <Button
            fullWidth
            loading={paying}
            onClick={() => {
              setPaying(true)
              window.setTimeout(() => setPaying(false), 1200)
            }}
          >
            پرداختِ {formatCurrency(total)}
          </Button>
          <p className="text-center text-xs text-muted-foreground">با پرداخت، قوانینِ خرید را پذیرفته‌ای.</p>
        </div>
      </main>
    </ControlSizeProvider>
  )
}