export const EventAttendeesDrawer = () => {
  return (
    <div
      id="attendeesDrawer"
      class="drawer-overlay"
      style="display: none;"
    >
      <div
        class="card"
        style="border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
      >
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
          <div style="width: 100%;">
            <div style="display: flex; justify-content: space-between; align-items: center;">
              <h3
                id="attendeesDrawerTitle"
                style="margin: 0 0 0.25rem 0; color: var(--text-primary);"
              >
                Live Attendees
              </h3>
              <button
                type="button"
                onclick="closeAttendeesDrawer()"
                style="background: none; border: none; font-size: 1.3rem; color: var(--text-muted); cursor: pointer;"
                aria-label="Close Drawer"
              >
                &times;
              </button>
            </div>
            <p style="color: var(--text-secondary); font-size: 0.85rem; margin: 0;">
              Manage active guest sessions for{" "}
              <strong id="attendeesDrawerEventName">...</strong>.
            </p>
          </div>
        </div>

        <div
          id="attendeesDrawerContent"
          style="min-height: 200px; max-height: 400px; overflow-y: auto; padding-right: 0.5rem;"
        >
          {/* Populated dynamically via JS */}
          <div style="display: flex; justify-content: center; align-items: center; height: 100%; color: var(--text-muted); font-size: 0.9rem;">
            Loading attendees...
          </div>
        </div>
      </div>
    </div>
  );
};