import type { ReactNode } from "react";
import { Truck } from "lucide-react";
import { formatPrice } from "@/data/category-showcases";
import { demoDelivery, type CartSummary } from "@/lib/commerce";

export function OrderSummary({ summary, children, items }: { summary: CartSummary; children?: ReactNode; items?: ReactNode }) {
  const remaining = Math.max(0, demoDelivery.freeFrom - summary.subtotal);
  return <aside className="order-summary"><p className="eyebrow">YOUR ORDER</p><h2>Order summary</h2>{items}<div className="summary-line"><span>Subtotal ({summary.count} {summary.count === 1 ? "item" : "items"})</span><strong>{formatPrice(summary.subtotal)}</strong></div><div className="summary-line"><span>Delivery</span><strong className={summary.delivery === 0 ? "free-delivery" : ""}>{summary.delivery === 0 ? "FREE" : formatPrice(summary.delivery)}</strong></div><div className="summary-total"><span>Total</span><strong>{formatPrice(summary.total)}</strong></div>{children}<div className="delivery-progress"><Truck size={19} /><p>{remaining ? <>Add <strong>{formatPrice(remaining)}</strong> more for free delivery.</> : "Your bag qualifies for free delivery."}</p><progress value={Math.min(summary.subtotal, demoDelivery.freeFrom)} max={demoDelivery.freeFrom} aria-label="Progress towards free delivery" /></div><p className="summary-demo-note">Demo delivery: Dhaka city {formatPrice(demoDelivery.dhaka)} · Outside {formatPrice(demoDelivery.outside)}.<br />Free from {formatPrice(demoDelivery.freeFrom)}.</p></aside>;
}