Order Confirmation Email Template

import Ark from "@arkhq/sdk";

const ark = new Ark({ apiKey: process.env.ARK_API_KEY });

interface OrderItem {
  name: string;
  quantity: number;
  price: number;
}

interface Order {
  id: string;
  items: OrderItem[];
  subtotal: number;
  shipping: number;
  total: number;
  shippingAddress: string;
}

async function sendOrderConfirmation(
  email: string,
  name: string,
  order: Order
) {
  const itemsHtml = order.items
    .map(item => `
      <div style="display:flex;justify-content:space-between;margin-bottom:10px;">
        <span>${item.name} × ${item.quantity}</span>
        <span>$${item.price.toFixed(2)}</span>
      </div>
    `)
    .join("");

  await ark.emails.send({
    from: "[email protected]",
    to: email,
    subject: `Order confirmed — #${order.id}`,
    html: `
      <h1>Order Confirmed!</h1>
      <p style="color:#666;">Order #${order.id}</p>
      <p>Hi ${name},</p>
      <p>Thanks for your order! We're preparing it now.</p>
      <div style="background:#f9f9f9;border-radius:8px;padding:20px;margin:20px 0;">
        <h2 style="font-size:16px;margin:0 0 15px 0;">Order Summary</h2>
        ${itemsHtml}
        <hr style="border:none;border-top:1px solid #eee;margin:15px 0;">
        <div style="display:flex;justify-content:space-between;font-weight:bold;">
          <span>Total</span>
          <span>$${order.total.toFixed(2)}</span>
        </div>
      </div>
      <a href="https://yourstore.com/orders/${order.id}" style="background:#000;color:#fff;padding:12px 30px;text-decoration:none;border-radius:6px;display:inline-block;">View Order</a>
    `,
  });
}