import Link from "next/link";

/** designspec.md §2.6 — only rendered when this store's cart group actually has items. */
export function StickyCartBar({ itemCount, total }: { itemCount: number; total: number }) {
  return (
    <div className="fixed inset-x-0 bottom-0 z-10 mx-auto flex w-full max-w-97.5 flex-col items-center gap-2 bg-white px-4 pt-4 pb-2 shadow-[0_-4px_15px_0_rgba(0,0,0,0.102)]">
      {/* DOM order intentionally mirrors the screenshot's left→right layout, not reading
          order — under this app's inherited dir="rtl", the first child renders at the
          right edge and the last at the left. */}
      <div className="flex w-full items-center justify-between">
        <div className="flex flex-col items-start gap-2">
          <span className="text-[12px] leading-none text-gray-600">جمع کل</span>
          <span className="text-[18px] font-bold leading-none text-foreground">
            {total.toLocaleString("fa-IR")} تومان
          </span>
        </div>

        <Link
          href="/cart"
          className="flex h-12.5 items-center gap-2 rounded-xl bg-primary-action py-1 px-5 text-white shadow-[0_6px_16px_-6px_rgba(0,0,0,0.078),0_2px_8px_-2px_rgba(0,0,0,0.071)]"
        >
          <span className="text-body-large font-bold">مشاهده سبد</span>
          <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/20 text-[13px] font-bold text-white">
            {itemCount.toLocaleString("fa-IR")}
          </span>
        </Link>
      </div>
      <div className="mt-2 h-1.5 w-32 rounded-full bg-black" />
    </div>
  );
}