import React from 'react';

interface LineItem {
  label: string;
  qty: number;
  priceCents: number;
}

interface OrderSummaryProps {
  lineItems: LineItem[];
  subtotalCents: number;
  taxCents: number;
  totalCents: number;
}

const formatCurrency = (cents: number) => {
  return new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR',
  }).format(cents / 100);
};

export default function OrderSummary({
  lineItems,
  subtotalCents,
  taxCents,
  totalCents,
}: OrderSummaryProps) {
  return (
    <div className="w-full max-w-md mx-auto bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
      <div className="p-4 border-b border-slate-100">
        <h3 className="text-lg font-semibold text-slate-900">Bestellübersicht</h3>
      </div>

      <div className="p-4">
        <table className="w-full text-sm text-left">
          <thead>
            <tr className="text-slate-500 border-b border-slate-100">
              <th className="py-2 font-medium">Artikel</th>
              <th className="py-2 text-right font-medium">Preis</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-50">
            {lineItems.map((item, idx) => (
              <tr key={idx}>
                <td className="py-3 text-slate-700">
                  <span className="font-medium mr-2">{item.qty}×</span>
                  {item.label}
                </td>
                <td className="py-3 text-right text-slate-700">
                  {formatCurrency(item.qty * item.priceCents)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>

        <div className="mt-6 space-y-2 border-t border-slate-100 pt-4">
          <div className="flex justify-between text-slate-600">
            <span>Zwischensumme</span>
            <span>{formatCurrency(subtotalCents)}</span>
          </div>
          <div className="flex justify-between text-slate-600">
            <span>MwSt.</span>
            <span>{formatCurrency(taxCents)}</span>
          </div>
          <div className="flex justify-between text-lg font-bold text-slate-900 pt-2">
            <span>Gesamtbetrag</span>
            <span>{formatCurrency(totalCents)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}