function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useEffect, useRef, useState } from 'react';
import { NoteTicker } from "./NoteTicker";
import { VENUE_WALL_STATUS_COLOR_MAP, alphaColor, clamp, deriveVenueWallStatus, formatVenueWallCountdown } from "./venueWallUtils";

/** 资源墙卡内共用的墙钟 tick（每卡一条 interval，避免多字段各挂一条） */
function useVenueWallClockNow() {
  var _useState = useState(function () {
      return Date.now();
    }),
    _useState2 = _slicedToArray(_useState, 2),
    now = _useState2[0],
    setNow = _useState2[1];
  useEffect(function () {
    var id = window.setInterval(function () {
      return setNow(Date.now());
    }, 1000);
    return function () {
      return window.clearInterval(id);
    };
  }, []);
  return now;
}

/**
 * 将服务端给出的「整分钟」计数与收到时的墙钟对齐，随 `now` 递减；
 * `value` 或 `resourceId` 从上游变更时重新锚定。
 * @param allowNegative 为 true 时不钳到 0，便于已过期时段继续展示「xxm overtime」（与 `formatVenueWallCountdown` 在负数分钟时一致）。
 */
function useDriftMinutesFromEpoch(value, resourceId, now) {
  var allowNegative = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  var _useState3 = useState(function () {
      return {
        min: value !== null && value !== void 0 ? value : 0,
        at: Date.now()
      };
    }),
    _useState4 = _slicedToArray(_useState3, 2),
    epoch = _useState4[0],
    setEpoch = _useState4[1];
  useEffect(function () {
    setEpoch({
      min: value !== null && value !== void 0 ? value : 0,
      at: Date.now()
    });
  }, [resourceId, value]);
  var drifted = epoch.min - Math.floor((now - epoch.at) / 60000);
  return allowNegative ? drifted : Math.max(0, drifted);
}

/** `late` 等递增分钟：以收到时刻为锚，随 `now` 增长 */
function useDriftUpMinutesFromEpoch(value, resourceId, now) {
  var _useState5 = useState(function () {
      return {
        min: value !== null && value !== void 0 ? value : 0,
        at: Date.now()
      };
    }),
    _useState6 = _slicedToArray(_useState5, 2),
    epoch = _useState6[0],
    setEpoch = _useState6[1];
  useEffect(function () {
    setEpoch({
      min: value !== null && value !== void 0 ? value : 0,
      at: Date.now()
    });
  }, [resourceId, value]);
  return Math.max(0, epoch.min + Math.floor((now - epoch.at) / 60000));
}
var DEFAULT_OCCUPIED = '#6f4ae6';
var DEFAULT_AVAILABLE = '#10b981';

/**
 * 单块场地大屏卡（由 test.tsx CardItem 迁移，样式为内联 + 少量类名，不依赖 Tailwind）。
 */
export var VenueWallCard = function VenueWallCard(_ref) {
  var _VENUE_WALL_STATUS_CO, _card$currentTime, _card$currentBooking, _card$nextList, _card$nextList$length, _card$nextList2, _nextItem$booking;
  var card = _ref.card,
    _ref$boardingSoonBefo = _ref.boardingSoonBeforeMin,
    boardingSoonBeforeMin = _ref$boardingSoonBefo === void 0 ? 10 : _ref$boardingSoonBefo,
    _ref$occupiedCardColo = _ref.occupiedCardColor,
    occupiedCardColor = _ref$occupiedCardColo === void 0 ? DEFAULT_OCCUPIED : _ref$occupiedCardColo,
    _ref$availableCardCol = _ref.availableCardColor,
    availableCardColor = _ref$availableCardCol === void 0 ? DEFAULT_AVAILABLE : _ref$availableCardCol,
    _ref$heroMaxWidthRati = _ref.heroMaxWidthRatio,
    heroMaxWidthRatio = _ref$heroMaxWidthRati === void 0 ? 0.6 : _ref$heroMaxWidthRati;
  var cardRef = useRef(null);
  var _useState7 = useState({
      width: 420,
      height: 300
    }),
    _useState8 = _slicedToArray(_useState7, 2),
    cardSize = _useState8[0],
    setCardSize = _useState8[1];
  useEffect(function () {
    if (!cardRef.current) return;
    var node = cardRef.current;
    var updateSize = function updateSize() {
      var rect = node.getBoundingClientRect();
      setCardSize({
        width: rect.width,
        height: rect.height
      });
    };
    updateSize();
    var observer = new ResizeObserver(updateSize);
    observer.observe(node);
    return function () {
      return observer.disconnect();
    };
  }, []);
  var wallNow = useVenueWallClockNow();
  var liveRemainingMin = useDriftMinutesFromEpoch(card.remainingMin, card.resourceId, wallNow, true);
  var liveStartsInMin = useDriftMinutesFromEpoch(card.startsInMin, card.resourceId, wallNow, false);
  var liveLateMin = useDriftUpMinutesFromEpoch(card.lateMin, card.resourceId, wallNow);
  var statusKey = deriveVenueWallStatus(_objectSpread(_objectSpread({}, card), {}, {
    remainingMin: liveRemainingMin
  }));
  var tone = (_VENUE_WALL_STATUS_CO = VENUE_WALL_STATUS_COLOR_MAP[statusKey]) !== null && _VENUE_WALL_STATUS_CO !== void 0 ? _VENUE_WALL_STATUS_CO : VENUE_WALL_STATUS_COLOR_MAP.inUse;
  var isOccupied = ['inUse', 'endingSoon', 'expired'].includes(statusKey);
  var heroText = isOccupied ? formatVenueWallCountdown(liveRemainingMin) : 'Available';
  var heroColor = isOccupied ? statusKey === 'inUse' ? '#ffffff' : tone.color : VENUE_WALL_STATUS_COLOR_MAP.available.color;
  var noteText = isOccupied ? tone.note : VENUE_WALL_STATUS_COLOR_MAP.available.note;
  var noteTextColor = isOccupied ? '#ffffff' : '#0f172a';
  var noteBg = isOccupied ? tone.noteBg : alphaColor(availableCardColor, 0.2);
  var subColor = isOccupied ? 'rgba(255,255,255,0.80)' : '#94a3b8';
  var mainColor = isOccupied ? '#ffffff' : '#0f172a';
  var currentLabel = 'Current';
  var currentTime = (_card$currentTime = card.currentTime) !== null && _card$currentTime !== void 0 ? _card$currentTime : '';
  var currentName = isOccupied ? (_card$currentBooking = card.currentBooking) !== null && _card$currentBooking !== void 0 ? _card$currentBooking : '' : '';
  var currentNameColor = mainColor;
  var nextNameColor = mainColor;
  var progress = isOccupied ? clamp(liveRemainingMin / 60 * 100, 0, 100) : 0;
  var progressColor = heroColor;
  var rightTag = tone.label;
  var rightTagColor = isOccupied ? '#ffffff' : tone.color;
  var rightTagBg = isOccupied ? statusKey === 'inUse' ? 'rgba(255,255,255,0.14)' : tone.color : alphaColor(tone.color, 0.12);
  var rightTagBorder = isOccupied ? 'rgba(255,255,255,0.18)' : alphaColor(tone.color, 0.35);
  var nextItem = (_card$nextList = card.nextList) === null || _card$nextList === void 0 ? void 0 : _card$nextList[0];
  var nextCountLabel = nextItem ? "1/".concat((_card$nextList$length = (_card$nextList2 = card.nextList) === null || _card$nextList2 === void 0 ? void 0 : _card$nextList2.length) !== null && _card$nextList$length !== void 0 ? _card$nextList$length : 0) : '';
  if (statusKey === 'boardingSoon') {
    var _card$currentBooking2;
    heroText = "Starts in ".concat(liveStartsInMin, "m");
    heroColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    noteText = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.note;
    noteTextColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    noteBg = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.18);
    currentLabel = 'Next';
    currentName = (_card$currentBooking2 = card.currentBooking) !== null && _card$currentBooking2 !== void 0 ? _card$currentBooking2 : '';
    currentNameColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    nextNameColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    progress = clamp((boardingSoonBeforeMin - liveStartsInMin) / boardingSoonBeforeMin * 100, 0, 100);
    progressColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    rightTag = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.label;
    rightTagColor = VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    rightTagBg = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.12);
    rightTagBorder = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.35);
  }
  if (statusKey === 'late') {
    var _card$currentBooking3;
    heroText = "Late +".concat(liveLateMin, "m");
    /** 仅主文案用红色；其余视觉与 Available 对齐 */
    heroColor = 'rgb(239, 68, 68)';
    noteText = VENUE_WALL_STATUS_COLOR_MAP.late.note;
    noteTextColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
    noteBg = VENUE_WALL_STATUS_COLOR_MAP.available.noteBg;
    currentLabel = 'Next';
    currentName = (_card$currentBooking3 = card.currentBooking) !== null && _card$currentBooking3 !== void 0 ? _card$currentBooking3 : '';
    currentNameColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
    nextNameColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
    progress = 100;
    progressColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
    rightTag = VENUE_WALL_STATUS_COLOR_MAP.late.label;
    rightTagColor = VENUE_WALL_STATUS_COLOR_MAP.available.color;
    rightTagBg = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.available.color, 0.12);
    rightTagBorder = alphaColor(VENUE_WALL_STATUS_COLOR_MAP.available.color, 0.35);
  }

  /**
   * 已过期：主文案应与 {@link formatVenueWallCountdown} 在负数分钟时一致（「xxm overtime」）；
   * drift 允许 remaining 为负后，仅「整分刚好为 0」时仍走 countdown(0) 的「Ending now」，改为「0m overtime」与产品预期一致。
   */
  if (statusKey === 'expired') {
    heroText = liveRemainingMin < 0 ? formatVenueWallCountdown(liveRemainingMin) : liveRemainingMin === 0 ? '0m overtime' : formatVenueWallCountdown(liveRemainingMin);
  }
  var surfaceAccentColor = statusKey === 'late' ? availableCardColor : statusKey === 'boardingSoon' ? VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color : availableCardColor;
  var cardBg = isOccupied ? "linear-gradient(180deg, ".concat(alphaColor(occupiedCardColor, 0.96), " 0%, ").concat(alphaColor(occupiedCardColor, 0.88), " 100%)") : alphaColor(surfaceAccentColor, statusKey === 'boardingSoon' || statusKey === 'late' ? 0.06 : 0.03);
  var cardBorder = isOccupied ? alphaColor(occupiedCardColor, 0.5) : alphaColor(surfaceAccentColor, 0.18);
  var moduleBorder = isOccupied ? 'rgba(255,255,255,0.10)' : alphaColor(surfaceAccentColor, 0.2);
  var totalUnits = 1.5 + 4 + 2 + 1 + 0.4 * 2 + 0.2 * 3;
  var heightUnit = Math.max(4, cardSize.height / totalUnits);
  var widthScale = clamp(cardSize.width / 420, 0.42, 1.6);
  var heightScale = clamp(cardSize.height / 300, 0.42, 1.8);
  var fitScale = Math.min(widthScale, heightScale);
  var unit = heightUnit;
  var shellPad = unit * 0.4;
  var sectionGap = unit * 0.2;
  var blockPad = Math.max(unit * 0.2, Math.min(unit * 0.3, 20));
  var cardRadius = clamp(unit * 0.62 * fitScale, 4, 28);
  var blockRadius = clamp(unit * 0.48 * fitScale, 3, 24);
  var noteRadius = clamp(unit * 0.4 * fitScale, 3, 20);
  var tagRadius = clamp(unit * 0.34 * fitScale, 3, 999);
  var headerHeight = unit * 1.5;
  var currentHeight = unit * 4;
  var nextHeight = unit * 2;
  var noteHeight = unit * 1;
  var areaSize = clamp(headerHeight * 0.18 * fitScale, 9, 18);
  var resourceSize = clamp(headerHeight * 0.34 * fitScale, 16, 42);
  var tagSize = clamp(headerHeight * 0.12 * fitScale, 10, 14);
  var tagHeight = clamp(headerHeight * 0.42, 28, 36);
  var currentMetaSize = clamp(currentHeight * 0.09 * fitScale, 9, 16);
  var currentNameSize = clamp(currentHeight * 0.15 * fitScale, 12, 30);
  var heroTextMaxWidth = Math.max(80, (cardSize.width - shellPad * 2 - blockPad * 2) * heroMaxWidthRatio);
  var heroMaxByName = currentNameSize * 2.5;
  var heroApproxFactor = Math.max(heroText.length * 0.58, 1);
  var heroFitByWidth = heroTextMaxWidth / heroApproxFactor;
  var heroSize = clamp(Math.min(heroFitByWidth, heroMaxByName), 18, heroMaxByName);
  var nextNameSize = clamp(nextHeight * 0.24 * fitScale, 12, 30);
  var nextMetaSize = clamp(currentMetaSize, 9, Math.max(10, nextNameSize * 0.68));
  var nextBlockPad = Math.max(unit * 0.16, Math.min(unit * 0.24, 16));
  var noteSize = clamp(noteHeight * 0.28 * fitScale, 10, 18);
  var tagFont = Math.max(8, tagSize * 0.68);
  return /*#__PURE__*/React.createElement("div", {
    ref: cardRef,
    className: "pisell-resource-wall-card",
    style: {
      position: 'relative',
      height: '100%',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
      borderRadius: cardRadius,
      background: cardBg,
      borderWidth: 1,
      borderStyle: 'solid',
      borderColor: cardBorder,
      boxShadow: '0 18px 48px rgba(15,23,42,0.06)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      flex: 1,
      display: 'grid',
      minHeight: 0,
      padding: shellPad,
      gap: sectionGap,
      gridTemplateRows: "".concat(headerHeight, "px ").concat(currentHeight, "px ").concat(nextHeight, "px ").concat(noteHeight, "px")
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      minHeight: 0,
      gridTemplateRows: '1fr 2fr',
      rowGap: sectionGap
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      textTransform: 'uppercase',
      letterSpacing: '0.24em',
      fontSize: areaSize,
      color: subColor,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      display: 'flex',
      alignItems: 'center'
    }
  }, card.area), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      alignItems: 'center',
      minHeight: 0,
      gridTemplateColumns: '1fr auto',
      columnGap: 8
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 700,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      minWidth: 0,
      fontSize: resourceSize,
      lineHeight: 0.96,
      color: mainColor
    }
  }, card.resource), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 8,
      flexShrink: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      borderWidth: 1,
      borderStyle: 'solid',
      fontWeight: 600,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexShrink: 0,
      fontSize: tagSize,
      lineHeight: 1,
      minHeight: tagHeight,
      borderRadius: tagRadius,
      padding: "0 ".concat(Math.max(8, tagFont), "px"),
      color: rightTagColor,
      borderColor: rightTagBorder,
      background: rightTagBg
    }
  }, rightTag)))), /*#__PURE__*/React.createElement("div", {
    style: {
      borderWidth: 1,
      borderStyle: 'solid',
      position: 'relative',
      minHeight: 0,
      borderRadius: blockRadius,
      borderColor: moduleBorder,
      background: isOccupied ? 'rgba(255,255,255,0.10)' : alphaColor(surfaceAccentColor, statusKey === 'boardingSoon' ? 0.18 : 0.2),
      padding: blockPad
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      height: '100%',
      display: 'grid',
      minHeight: 0,
      gridTemplateRows: '1.4fr 2.6fr auto',
      rowGap: sectionGap
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'grid',
      minHeight: 0,
      gridTemplateColumns: '1fr auto',
      columnGap: 8,
      alignItems: 'start'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      textTransform: 'uppercase',
      letterSpacing: '0.22em',
      lineHeight: 1,
      fontSize: currentMetaSize,
      color: subColor
    }
  }, currentLabel), /*#__PURE__*/React.createElement("div", {
    style: {
      lineHeight: 1,
      marginTop: '0.2em',
      fontSize: currentMetaSize,
      color: subColor
    }
  }, currentTime || "\xA0")), /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 600,
      textAlign: 'right',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      minWidth: 0,
      alignSelf: 'start',
      fontSize: currentNameSize,
      lineHeight: 1.08,
      color: currentNameColor,
      maxWidth: cardSize.width * 0.42,
      paddingTop: '0.04em',
      paddingBottom: '0.08em'
    }
  }, currentName)), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'flex-end',
      minHeight: 0,
      overflow: 'hidden'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 600,
      letterSpacing: '-0.02em',
      whiteSpace: 'nowrap',
      fontSize: heroSize,
      lineHeight: 1.08,
      color: heroColor,
      maxWidth: heroTextMaxWidth
    }
  }, heroText)), statusKey === 'boardingSoon' || isOccupied ? /*#__PURE__*/React.createElement("div", {
    style: {
      borderRadius: 9999,
      overflow: 'hidden',
      height: Math.max(5, unit * 0.08),
      background: isOccupied ? 'rgba(255,255,255,0.14)' : 'rgba(148,163,184,0.18)'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      height: '100%',
      borderRadius: 9999,
      width: "".concat(progress, "%"),
      background: progressColor
    }
  })) : null)), /*#__PURE__*/React.createElement("div", {
    style: {
      borderWidth: 1,
      borderStyle: 'solid',
      minHeight: 0,
      borderRadius: blockRadius,
      borderColor: moduleBorder,
      background: isOccupied ? 'rgba(255,255,255,0.04)' : alphaColor(surfaceAccentColor, statusKey === 'boardingSoon' ? 0.1 : 0.08),
      padding: nextBlockPad
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      height: '100%',
      minHeight: 0,
      display: 'grid',
      gridTemplateRows: '1fr 2fr',
      rowGap: sectionGap
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'flex-start',
      justifyContent: 'space-between',
      gap: 8,
      minHeight: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      textTransform: 'uppercase',
      letterSpacing: '0.12em',
      lineHeight: 1,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      fontSize: nextMetaSize,
      color: subColor
    }
  }, nextItem !== null && nextItem !== void 0 && nextItem.time ? "Next \xB7 ".concat(nextItem.time) : 'Next'), /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 600,
      flexShrink: 0,
      fontSize: nextMetaSize,
      color: subColor,
      lineHeight: 1
    }
  }, nextCountLabel)), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'flex-start',
      minWidth: 0,
      minHeight: 0
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      fontWeight: 600,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      fontSize: nextNameSize,
      lineHeight: 1,
      color: nextNameColor,
      paddingTop: sectionGap
    }
  }, (_nextItem$booking = nextItem === null || nextItem === void 0 ? void 0 : nextItem.booking) !== null && _nextItem$booking !== void 0 ? _nextItem$booking : '')))), /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      overflow: 'hidden',
      minHeight: 0,
      padding: Math.max(6, blockPad * 0.66),
      borderRadius: noteRadius,
      background: noteBg,
      border: '1px solid transparent'
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      width: Math.max(8, unit * 0.12),
      height: Math.max(8, unit * 0.12),
      borderRadius: 999,
      background: heroColor,
      flex: '0 0 auto'
    }
  }), /*#__PURE__*/React.createElement("div", {
    style: {
      fontSize: noteSize,
      color: noteTextColor,
      width: '100%',
      height: '100%',
      display: 'flex',
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(NoteTicker, {
    text: noteText,
    color: noteTextColor,
    duration: 24,
    shouldMarquee: noteText.length > 32
  })))));
};