پیگیریِ زندهٔ پیک

"use client"

import { ChatIcon, PhoneIcon } from "@/components/icons"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Progress } from "@/components/ui/progress"
import { stockImages } from "@/lib/stock-images"

/**
 * پیگیری زندهٔ پیک: نقشهٔ تمام‌صفحه و کارتِ پایینی ثابت با زمانِ رسیدنِ درشت، نوارِ پیشرفت،
 * پیک با عکس و پلاک، و تماس یا پیام؛ برای سفارشِ غذا و تحویلِ فوری.
 */
export default function OrderTrackingLiveBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="relative mx-auto flex min-h-svh w-full max-w-md flex-col overflow-hidden bg-subtle">
        <h1 className="sr-only">پیگیری پیک</h1>
        {/* eslint-disable-next-line @next/next/no-img-element -- نقشهٔ تزئینی؛ در محصول نقشهٔ واقعی می‌آید */}
        <img src="/blocks/contact-map.svg" alt="مسیرِ پیک روی نقشه" className="dark:brightness-[0.75] absolute inset-0 size-full object-cover" />
        <section aria-live="polite" className="relative mt-auto flex flex-col gap-5 rounded-t-xl bg-card p-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] shadow-card">
          <div className="flex items-end justify-between gap-3">
            <div className="flex flex-col">
              <span className="text-sm text-muted-foreground">رسیدن تا</span>
              <span className="text-3xl font-black tabular-nums">۱۲ دقیقه</span>
            </div>
            <span className="text-sm text-muted-foreground">۲٫۴ کیلومتر مانده</span>
          </div>
          <Progress value={70} aria-label="پیشرفتِ مسیر" color="success" />
          <div className="flex items-center gap-3 rounded-xl bg-subtle p-3">
            <Avatar size="lg" alt="" src={stockImages.personMan2.src} />
            <span className="flex flex-1 flex-col">
              <span className="font-semibold">علی کاظمی</span>
              <span className="text-sm text-muted-foreground">موتور · ۲۲۴ ایران ۱۱</span>
            </span>
            <Button variant="outline" size="icon" aria-label="پیام به پیک" className="bg-card">
              <ChatIcon />
            </Button>
            <Button size="icon" aria-label="تماس با پیک">
              <PhoneIcon />
            </Button>
          </div>
          <p className="text-sm text-muted-foreground">سفارش از کافه رست · ۲ قلم</p>
        </section>
      </main>
    </ControlSizeProvider>
  )
}