function EventsTable({ events, onSelect }) {
  return (
    <div className="card">
      <div className="card-head">
        <h3>Events</h3>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn ghost"><i data-lucide="filter"></i>Filter</button>
          <button className="btn primary"><i data-lucide="plus"></i>New event</button>
        </div>
      </div>
      <table className="lb">
        <thead>
          <tr>
            <th style={{ width: 30 }}></th>
            <th>EVENT</th>
            <th>DATE</th>
            <th>SPORT</th>
            <th className="num">STARTERS</th>
            <th className="num">WAVES</th>
            <th>STATUS</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {events.map(e => (
            <tr key={e.id} onClick={() => onSelect && onSelect(e)} style={{ cursor: 'pointer' }}>
              <td><i data-lucide={e.icon} style={{ width: 14, height: 14, color: 'var(--ink-3)' }}></i></td>
              <td className="name">{e.name}</td>
              <td>{e.date}</td>
              <td>{e.sport}</td>
              <td className="num">{e.starters.toLocaleString()}</td>
              <td className="num">{e.waves}</td>
              <td><span className={'pill ' + e.statusClass}><span className="dot"></span>{e.status}</span></td>
              <td><i data-lucide="chevron-right" style={{ width: 14, height: 14, color: 'var(--ink-4)' }}></i></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
window.EventsTable = EventsTable;