Cart Summary

import { CartSummary } from "@/components/ui/cart-summary";

export default function Example() {
  return <CartSummary />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const CartSummary = forwardRef(({ className, subtotal = 0, tax = 0, shipping = 0, total, onCheckout, ...props }, ref) => (
  <div ref={ref} className={cn("rounded-lg border bg-card p-6", className)} {...props}>
    <h3 className="text-lg font-semibold">Order Summary</h3>
    <div className="mt-4 space-y-2 text-sm">
      <div className="flex justify-between"><span className="text-muted-foreground">Subtotal</span><span>${subtotal.toFixed(2)}</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Shipping</span><span>{shipping === 0 ? "Free" : `$${shipping.toFixed(2)}`}</span></div>
      <div className="flex justify-between"><span className="text-muted-foreground">Tax</span><span>${tax.toFixed(2)}</span></div>
      <div className="border-t pt-2">
        <div className="flex justify-between text-base font-semibold"><span>Total</span><span>${(total ?? subtotal + tax + shipping).toFixed(2)}</span></div>
      </div>
    </div>
    {onCheckout && (
      <button onClick={onCheckout} className="mt-4 inline-flex h-10 w-full items-center justify-center rounded-md bg-primary text-sm font-medium text-primary-foreground hover:bg-primary/90">
        Checkout
      </button>
    )}
  </div>
));
CartSummary.displayName = "CartSummary";

export { CartSummary };