'use client';

import type { OrderItemData, OrderStatus } from "@/lib/types";
import { StatusBadge } from "./StatusBadge";

export function SummaryPanel({
  items,
  status,
  customerCount,
}: {
  items: OrderItemData[];
  status: OrderStatus;
  customerCount: number;
}) {
  const totalOrderValue = items.reduce((sum, item) => sum + item.finalPrice, 0);
  const myNetTotal = items.reduce((sum, item) => sum + item.myNetPrice, 0);

  return (
    <div className="bg-surface border-2 border-border rounded-2xl p-5 shadow-card space-y-4">
      <h3 className="font-display text-lg font-bold text-fg">Order Summary</h3>

      <div className="space-y-3">
        <div className="flex justify-between items-center">
          <span className="text-sm text-muted">Status</span>
          <StatusBadge status={status} />
        </div>
        <div className="flex justify-between items-center">
          <span className="text-sm text-muted">Total Order Value</span>
          <span className="font-mono font-bold text-lg text-fg">${totalOrderValue.toFixed(2)}</span>
        </div>
        <div className="flex justify-between items-center">
          <span className="text-sm text-muted">My Net Total</span>
          <span className="font-mono font-bold text-lg text-accent">${myNetTotal.toFixed(2)}</span>
        </div>
        <div className="flex justify-between items-center">
          <span className="text-sm text-muted">Items</span>
          <span className="font-mono font-medium">{items.length}</span>
        </div>
        <div className="flex justify-between items-center">
          <span className="text-sm text-muted">Customers</span>
          <span className="font-mono font-medium">{customerCount}</span>
        </div>
      </div>
    </div>
  );
}