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

/* 通知栏（移动端）— 规格 §16；容器 role=status（读屏朗读一次）；
   跑马灯在 prefers-reduced-motion 下由 CSS 停止滚动并换行（无障碍硬要求）。 */
export default function NoticeBar({
  tone = 'default',
  scrollable = false,
  closable = false,
  text = '',
  onClose,
  children = null,
}) {
  const content = text || children;
  const cls =
    'kole-m-noticebar' +
    ` kole-m-noticebar--${tone}` +
    (scrollable ? ' kole-m-noticebar--scrollable' : '');

  return (
    <div className={cls} role="status">
      <span className="kole-m-noticebar__icon" aria-hidden="true">
        ▸
      </span>
      <span className="kole-m-noticebar__text">
        {scrollable ? (
          /* 无缝循环：两段相同文案，第二段是循环占位（静止时被 CSS 隐藏） */
          <span className="kole-m-noticebar__track">
            <span className="kole-m-noticebar__seg">{content}</span>
            <span className="kole-m-noticebar__seg kole-m-noticebar__seg--dup" aria-hidden="true">
              {content}
            </span>
          </span>
        ) : (
          content
        )}
      </span>
      {closable ? (
        <button
          className="kole-m-noticebar__close"
          type="button"
          aria-label={`关闭通告：${typeof content === 'string' ? content : ''}`}
          onClick={() => {
            if (onClose) onClose();
          }}
        >
          ✕
        </button>
      ) : null}
    </div>
  );
}