veza/apps/web/src/components/commerce/OrderSummary.tsx

import React from 'react';
import { Card } from '../ui/card';
import { Tag, ShieldCheck } from 'lucide-react';

interface OrderSummaryProps {
  subtotal: number;
  taxRate?: number;
  discount?: { code: string; amount: number; type: 'percent' | 'fixed' };
  currency?: string;
  onCheckout?: () => void;
  loading?: boolean;
}

export const OrderSummary: React.FC<OrderSummaryProps> = ({
  subtotal,
  taxRate = 0.08,
  discount,
  currency = 'USD',
  onCheckout,
  loading = false,
}) => {
  const discountAmount = discount
    ? discount.type === 'percent'
      ? subtotal * (discount.amount / 100)
      : discount.amount
    : 0;

  const taxableAmount = Math.max(0, subtotal - discountAmount);
  const taxAmount = taxableAmount * taxRate;
  const total = taxableAmount + taxAmount;

  const formatPrice = (amount: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency,
    }).format(amount);
  };

  return (
    <div className="space-y-6">
      <Card variant="gaming" className="p-6">
        <h3 className="font-bold text-white mb-6 uppercase tracking-wider text-sm border-b border-kodo-steel pb-2">
          Order Summary
        </h3>

        <div className="space-y-4 text-sm mb-6">
          <div className="flex justify-between text-kodo-content-dim">
            <span>Subtotal</span>
            <span className="text-white font-mono">
              {formatPrice(subtotal)}
            </span>
          </div>

          {discount && (
            <div className="flex justify-between text-kodo-lime">
              <span className="flex items-center gap-2">
                <Tag className="w-3 h-3" /> Discount ({discount.code})
              </span>
              <span className="font-mono">-{formatPrice(discountAmount)}</span>
            </div>
          )}

          <div className="flex justify-between text-kodo-content-dim">
            <span>Estimated Tax ({(taxRate * 100).toFixed(0)}%)</span>
            <span className="text-white font-mono">
              {formatPrice(taxAmount)}
            </span>
          </div>
        </div>

        <div className="border-t border-kodo-steel pt-4 mb-6">
          <div className="flex justify-between items-end">
            <span className="font-bold text-white">Total</span>
            <span className="text-2xl font-mono font-bold text-kodo-steel">
              {formatPrice(total)}
            </span>
          </div>
        </div>

        {onCheckout && (
          <button
            className="w-full h-12 bg-gradient-to-r from-kodo-cyan-dim to-kodo-cyan text-kodo-void border border-transparent font-bold tracking-wide rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-opacity duration-200 hover:opacity-90"
            onClick={onCheckout}
            disabled={loading}
          >
            {loading ? 'PROCESSING...' : 'PROCEED TO CHECKOUT'}
          </button>
        )}
      </Card>

      <div className="bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50 flex items-start gap-4">
        <ShieldCheck className="w-5 h-5 text-kodo-gold flex-shrink-0" />
        <div>
          <h4 className="font-bold text-white text-sm mb-1">Secure Checkout</h4>
          <p className="text-xs text-kodo-content-dim leading-relaxed">
            Transactions are encrypted. Downloads are available immediately
            after payment.
          </p>
        </div>
      </div>
    </div>
  );
};