import React, { useEffect } from 'react';

export function Toasts({ items, onDismiss }) {
  useEffect(() => {
    const timers = items.map((t) =>
      t.sticky ? null : setTimeout(() => onDismiss(t.id), t.duration || 4000),
    );
    return () => timers.forEach((t) => t && clearTimeout(t));
  }, [items, onDismiss]);

  if (!items.length) return null;

  return (
    <div className="toasts">
      {items.map((t) => (
        <div key={t.id} className={`toast ${t.kind || ''}`}>
          <span className={`dot ${t.kind || ''}`} style={{ marginTop: 4 }} />
          <div className="body">
            <strong>{t.title}</strong>
            {t.message && <small>{t.message}</small>}
            {t.action && (
              <button className="btn btn-link sm" onClick={t.action.onClick} style={{ marginTop: 4, padding: 0 }}>
                {t.action.label}
              </button>
            )}
          </div>
          <button onClick={() => onDismiss(t.id)} title="Закрыть">×</button>
        </div>
      ))}
    </div>
  );
}