1
import MoneyStatistic from "@cocalc/frontend/purchases/money-statistic";
2
import { ReactNode } from "react";
3

4
interface Props {
5
  cost: number | null;
6
  description: ReactNode;
7
  style?;
8
}
9

10
export default function CostOverview({ cost, description, style }: Props) {
11
  if (cost == null) {
12
    return null;
13
  }
14
  return (
15
    <div style={{ textAlign: "center", ...style }}>
16
      <MoneyStatistic
17
        value={cost}
18
        title={<b>Total Cost Per Hour While Running</b>}
19
        costPerMonth={730 * cost}
20
      />
21
      <div style={{ color: "#666", maxWidth: "600px", margin: "auto" }}>
22
        {description}
23
      </div>
24
    </div>
25
  );
26
}
27

28