Spot the bug: React / Next.js

1interface Order {
2  id: string
3  status: 'pending' | 'shipped' | 'delivered' | 'cancelled'
4  trackingNumber?: string
5}
6
7export function OrderStatus({ order }: { order: Order }) {
8  return (
9    <div className="status">
10      {order.status === 'pending' ? (
11        <span>Pending</span>
12      ) : order.status === 'shipped' ? (
13        <span>Shipped: {order.trackingNumber}</span>
14      ) : order.status === 'delivered' ? (
15        <span>Delivered</span>
16      ) : (
17        <span>Cancelled</span>
18      )}
19    </div>
20  )
21}