import { Tooltip } from "tdesign-react";

import type { RecentSample } from "../../shared/api";

import { formatRelativeTime } from "../utils/time";

interface StatusBarProps {
  maxSlots?: number;
  samples: RecentSample[];
}

export function StatusBar({ maxSlots = 30, samples }: StatusBarProps) {
  const blocks = [];
  for (let i = 0; i < maxSlots; i++) {
    const sample = samples[i];
    if (sample) {
      blocks.push(
        <Tooltip
          content={`${formatRelativeTime(sample.timestamp)}，${sample.up ? "正常" : "异常"}`}
          key={i}
          placement="top"
        >
          <span className={`status-bar-block ${sample.up ? "status-bar-block--up" : "status-bar-block--down"}`} />
        </Tooltip>,
      );
    } else {
      blocks.push(<span className="status-bar-block status-bar-block--empty" key={i} />);
    }
  }

  return <div className="status-bar">{blocks}</div>;
}