'use client';

function relativeTime(iso) {
  if (!iso) return '';
  try {
    const diff = Date.now() - new Date(iso).getTime();
    const sec = Math.floor(diff / 1000);
    if (sec < 60) return 'just now';
    const min = Math.floor(sec / 60);
    if (min < 60) return `${min}m ago`;
    const hr = Math.floor(min / 60);
    if (hr < 24) return `${hr}h ago`;
    return `${Math.floor(hr / 24)}d ago`;
  } catch { return iso; }
}

export default function ShareAccessLog({ rows }) {
  if (!rows.length) return null;
  return (
    <section className="share-panel-section">
      <p className="share-panel-section-title">Recent access</p>
      <div className="share-panel-access-list">
        {rows.map((row) => (
          <div key={row.id} className="share-panel-access-row">
            <div>
              <span>{row.type?.replace(/^artifact\./, '').replace(/\./g, ' ') || 'access'}</span>
              {row.ip ? <small>{row.ip.split('.').slice(0, 3).join('.')}.0</small> : null}
            </div>
            <time>{relativeTime(row.at)}</time>
          </div>
        ))}
      </div>
    </section>
  );
}
