import React from 'react';
import './Toast.css';

/* 轻提示（移动端）— 规格 §12；容器 role=status + aria-live=polite（朗读一次不打断）；
   提示本身不可点、不抢焦点；mask=true 时遮罩吸收手势。 */
export default function Toast({
  tone = 'info',
  position = 'center',
  open = false,
  mask = false,
  text = '',
  children = null,
}) {
  const content = text || children;
  const cls =
    'kole-m-toast' +
    ` kole-m-toast--${position}` +
    (tone === 'loading' ? ' kole-m-toast--loading' : '') +
    (open ? ' is-open' : '');

  return (
    <>
      <div className={'kole-m-toast__mask' + (open && mask ? ' is-open' : '')} aria-hidden="true" />
      <div className={cls} role="status" aria-live="polite" aria-busy={tone === 'loading' ? 'true' : undefined}>
        {tone === 'loading' ? (
          <span className="kole-m-toast__icon" aria-hidden="true">
            ◌
          </span>
        ) : null}
        <span className="kole-m-toast__text">{content}</span>
      </div>
    </>
  );
}