import type { OrderSummary } from "@orderops/shared";
import { Link } from "react-router-dom";

interface OrderListProps {
  orders: OrderSummary[];
}

export function OrderList({ orders }: OrderListProps) {
  return (
    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
      <div className="border-b border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700">Orders</div>
      <ul className="divide-y divide-slate-200">
        {orders.map((order) => (
          <li key={order.id}>
            <Link className="flex flex-col gap-1 px-4 py-3 text-left transition hover:bg-slate-50" to={`/orders/${order.id}`}>
              <span className="text-sm font-semibold text-slate-900">{order.orderNumber}</span>
              <span className="text-sm text-slate-600">{order.customer.name}</span>
              <span className="text-xs text-slate-500">{order.status} · {order.itemCount} items</span>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}