const ActivityFeed = ({ days, limit=6 }) => {
  const withComments = days.filter(d => d.comment).slice(-limit).reverse();
  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
      {withComments.length === 0 && (
        <div style={{ color:'var(--fg-subtle)', fontSize: 13, padding:'12px 0' }}>Пока нет комментариев.</div>
      )}
      {withComments.map((d, i) => (
        <div key={i} style={{ display:'flex', gap: 10, padding:'10px 0', borderBottom: i < withComments.length-1 ? '1px solid var(--border)' : 'none' }}>
          <Avatar emoji={d.authorAvatar} color={d.authorColor} size={32}/>
          <div style={{ flex:1, minWidth: 0 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 3, flexWrap:'wrap' }}>
              <span style={{ fontWeight: 600, fontSize: 13 }}>{d.authorName || '—'}</span>
              <span className="mono" style={{ fontSize: 10, color:'var(--fg-subtle)' }}>{fmtDate(d.date).toUpperCase()}</span>
              <span style={{ display:'inline-flex', gap: 1 }}>
                {Array.from({length:5}).map((_,ii)=>(
                  <IconStar key={ii} size={11} filled={ii < d.rating} style={{ color: ii < d.rating ? 'var(--star)' : 'var(--border-strong)' }}/>
                ))}
              </span>
            </div>
            <div style={{ fontSize: 14, color:'var(--fg)', lineHeight: 1.45 }}>{d.comment}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

Object.assign(window, { ActivityFeed });