export default function SosPanel({ sos, onAck, onResolve, onSelect }) {
  const open = sos.filter((a) => a.state !== 'resolved');
  return (
    <section className="panel">
      <h2>SOS alerts ({open.length})</h2>
      {sos.length === 0 && <p className="muted">No active alerts.</p>}
      {sos.map((a) => (
        <div key={a.id} className={`sos-item ${a.state === 'ack' ? 'ack' : ''}`}>
          <div className="sos-top">
            <span>🆘 {a.member_name}</span>
            <span style={{ fontSize: 10, color: '#7d8b9c' }}>{new Date(a.created_at).toLocaleTimeString()}</span>
          </div>
          <div className="sos-meta">
            {a.lat != null ? `${a.lat.toFixed(5)}, ${a.lng.toFixed(5)}` : 'no position'} ·{' '}
            {a.state === 'ack' ? `ack by ${a.ack_by}` : 'unacknowledged'}
          </div>
          <div className="row">
            {a.state === 'open' && <button className="btn-ack" onClick={() => onAck(a.id)}>Ack</button>}
            {a.state !== 'resolved' && <button className="btn-mut" onClick={() => onResolve(a.id)}>Resolve</button>}
            <button className="btn-mut" onClick={() => onSelect(a.member_id)}>Locate</button>
          </div>
        </div>
      ))}
    </section>
  );
}