import { useEffect, useState } from 'react';
import type { TableNotice as TableNoticeData } from '../game/types';
import './TableNotice.css';

interface Props {
  notice: TableNoticeData;
}

function fmt(sec: number) {
  const m = Math.floor(sec / 60)
    .toString()
    .padStart(2, '0');
  const s = (sec % 60).toString().padStart(2, '0');
  return `00:${m}:${s}`;
}

/** 中央提示：人数不足自动结算 + 倒计时 */
export function TableNotice({ notice }: Props) {
  const [left, setLeft] = useState(notice.countdown);

  useEffect(() => {
    const id = setInterval(() => {
      setLeft((v) => (v > 0 ? v - 1 : notice.countdown));
    }, 1000);
    return () => clearInterval(id);
  }, [notice.countdown]);

  return (
    <div className="tnotice">
      <div className="tnotice__text">{notice.text}</div>
      <div className="tnotice__count">
        倒计时 <span className="tnotice__count-val">{fmt(left)}</span>
      </div>
    </div>
  );
}
