import { useId } from "react";

/**
 * Окно объявления администрации (вариант E из #84): заголовок — в плашке-шапке, ниже текст,
 * точки очереди и «Понятно». Крестика нет намеренно: закрытие — только осознанное.
 *
 * bodyHtml у игрока — HTML, очищенный сервером по белому списку (announcement_service),
 * поэтому вставляется как есть. В предпросмотре админки — содержимое его же редактора.
 */
export function AnnouncementWindow({
  title,
  bodyHtml,
  updated = false,
  index = 0,
  total = 1,
  onOk,
}: {
  title: string;
  bodyHtml: string;
  updated?: boolean;
  index?: number;
  total?: number;
  onOk: () => void;
}) {
  const titleId = useId();
  return (
    <div className="modal-overlay">
      <div className="modal ann-modal" role="dialog" aria-modal="true" aria-labelledby={titleId}>
        <div className="ann-ribbon">
          <div className="ann-ribbon-title" id={titleId}>
            {title}
          </div>
          {updated && <div className="ann-updated">обновлено</div>}
        </div>
        <div className="ann-body" dangerouslySetInnerHTML={{ __html: bodyHtml }} />
        <div className="modal-actions ann-actions">
          <div className="ann-dots" aria-hidden="true">
            {total > 1 &&
              Array.from({ length: total }, (_, k) => (
                <i key={k} className={k <= index ? "on" : undefined} />
              ))}
          </div>
          <button className="btn btn-primary" onClick={onOk} autoFocus>
            Понятно
          </button>
        </div>
      </div>
    </div>
  );
}