import { useCartStore } from '../../stores/cart';
import { formatCurrency } from '../../lib/utils';

export default function OrderSummary() {
  const { items } = useCartStore();
  
  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const tax = subtotal * 0.07;
  const shipping = subtotal >= 500 ? 0 : 50;
  const total = subtotal + tax + shipping;

  return (
    <div className="bg-gray-50 rounded-lg p-6 sticky top-4">
      <h3 className="font-medium text-lg mb-4">สรุปคำสั่งซื้อ</h3>
      
      <div className="space-y-3 max-h-64 overflow-y-auto">
        {items.map((item) => (
          <div key={item.id} className="flex gap-3">
            <img
              src={item.image}
              alt={item.name}
              className="w-14 h-14 object-cover rounded"
            />
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium truncate">{item.name}</p>
              {item.variant && (
                <p className="text-xs text-gray-500">{item.variant.name}</p>
              )}
              <p className="text-sm text-gray-600">x{item.quantity}</p>
            </div>
            <p className="text-sm font-medium">
              {formatCurrency(item.price * item.quantity)}
            </p>
          </div>
        ))}
      </div>

      <div className="border-t mt-4 pt-4 space-y-2">
        <div className="flex justify-between text-sm">
          <span className="text-gray-600">ราคารวม</span>
          <span>{formatCurrency(subtotal)}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-600">ภาษี VAT (7%)</span>
          <span>{formatCurrency(tax)}</span>
        </div>
        <div className="flex justify-between text-sm">
          <span className="text-gray-600">ค่าจัดส่ง</span>
          <span>{shipping === 0 ? 'ฟรี' : formatCurrency(shipping)}</span>
        </div>
        {shipping > 0 && (
          <p className="text-xs text-blue-600">
            ซื้ออีก {formatCurrency(500 - subtotal)} จะได้จัดส่งฟรี!
          </p>
        )}
      </div>

      <div className="border-t mt-4 pt-4 flex justify-between font-bold text-lg">
        <span>รวมทั้งสิ้น</span>
        <span className="text-blue-600">{formatCurrency(total)}</span>
      </div>
    </div>
  );
}
