/* global React */
(function () {
  const T = window.SC_T;

  function Toast({ show, kind, children }) {
    if (!show) return null;
    const color = kind === 'ok' ? T.ok : kind === 'err' ? T.err : T.accent;
    return (
      <div style={{
        position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)',
        zIndex: 80, display: 'inline-flex', alignItems: 'center', gap: 10,
        padding: '10px 18px', borderRadius: 999,
        background: '#111827', color: '#fff', fontSize: 13, fontWeight: 500,
        boxShadow: '0 10px 30px rgba(17,24,39,0.4), 0 2px 6px rgba(17,24,39,0.3)',
        animation: 'sc-toast 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
      }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: color }} />
        {children}
      </div>
    );
  }

  window.Toast = Toast;
})();