{
  "name": "booking-list",
  "title": "BookingList",
  "description": "List of booking cards with optional self-fetching.",
  "type": "component",
  "registryDependencies": [
    "booking-card",
    "cn"
  ],
  "files": [
    {
      "path": "booking-list.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { CustomerBooking } from \"@cimplify/sdk\";\nimport { useBookings } from \"@cimplify/sdk/react\";\nimport { BookingCard } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BookingListClassNames {\n  root?: string;\n  item?: string;\n  loading?: string;\n  empty?: string;\n}\n\nexport interface BookingListProps {\n  /** Pre-fetched bookings (skips fetch). */\n  bookings?: CustomerBooking[];\n  /** Filter: \"all\", \"upcoming\", or \"past\". */\n  filter?: \"all\" | \"upcoming\" | \"past\";\n  /** Called when cancel is clicked on a booking. */\n  onCancel?: (booking: CustomerBooking) => void;\n  /** Called when reschedule is clicked on a booking. */\n  onReschedule?: (booking: CustomerBooking) => void;\n  /** Called when a booking is clicked. */\n  onBookingClick?: (booking: CustomerBooking) => void;\n  /** Custom booking renderer. */\n  renderBooking?: (booking: CustomerBooking) => React.ReactNode;\n  /** Text shown when empty. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: BookingListClassNames;\n}\n\nexport function BookingList({\n  bookings: bookingsProp,\n  filter,\n  onCancel,\n  onReschedule,\n  onBookingClick,\n  renderBooking,\n  emptyMessage = \"No bookings yet\",\n  className,\n  classNames,\n}: BookingListProps): React.ReactElement {\n  const { bookings: fetched, isLoading } = useBookings({\n    filter,\n    enabled: bookingsProp === undefined,\n  });\n\n  const bookings = bookingsProp ?? fetched;\n\n  if (isLoading && bookings.length === 0) {\n    return (\n      <div\n        data-cimplify-booking-list\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (bookings.length === 0) {\n    return (\n      <div\n        data-cimplify-booking-list\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-booking-list className={cn(className, classNames?.root)}>\n      {bookings.map((booking) => (\n        <div\n          key={booking.order_id}\n          data-cimplify-booking-list-item\n          className={classNames?.item}\n          onClick={() => onBookingClick?.(booking)}\n          role={onBookingClick ? \"button\" : undefined}\n          tabIndex={onBookingClick ? 0 : undefined}\n          onKeyDown={\n            onBookingClick\n              ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    onBookingClick(booking);\n                  }\n                }\n              : undefined\n          }\n        >\n          <BookingCard\n            booking={booking}\n            onCancel={onCancel}\n            onReschedule={onReschedule}\n            renderBooking={renderBooking}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}