const { Stat, Estimate, DataTable, KeyValueList, InlineHint } =
  window.EquestrianismDesignSystem_6b57f9;

function Budget() {
  return (
    <div className="stack">
      <window.PageHead title="Budget"
        sub="Model API spend, in the currency it is billed in. Figures are exact and never rounded up." />
      <div className="panel" style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
        <Stat label="Spent this month" value={<Estimate note="Two runs' price is not yet reported">$14.62</Estimate>}
          qualifier="estimate" detail="Cap $40.00 · resets 1 September" />
        <Stat label="Last month" value="$22.09" />
        <Stat label="Runs this month" value="17" />
      </div>
      <div className="two-col">
        <div className="panel">
          <p className="panel-lbl">Spend by project</p>
          <DataTable
            columns={[
              { key: 'project', label: 'Project' },
              { key: 'runs', label: 'Runs', numeric: true },
              { key: 'spend', label: 'Spend (USD)', numeric: true },
            ]}
            rows={[
              { project: 'Weekly shop', runs: '4', spend: '$5.87' },
              { project: 'School admin', runs: '11', spend: <Estimate note="One run's price is unknown">$4.11</Estimate> },
              { project: 'Research', runs: '2', spend: '$4.64' },
            ]}
            foot={{ project: 'Total', runs: '17', spend: <Estimate note="Two runs' price is not yet reported">$14.62</Estimate> }} />
        </div>
        <div className="panel">
          <p className="panel-lbl">Spend by week</p>
          <KeyValueList items={[
            { label: 'Week of 27 July', value: '$0.00' },
            { label: 'Week of 3 August', value: '$3.05' },
            { label: 'Week of 10 August', value: '$11.57' },
          ]} />
          <InlineHint style={{ marginTop: 12 }}>
            A converted figure is shown only alongside the billed one, with its rate and date stated — never in place of it.
          </InlineHint>
        </div>
      </div>
    </div>
  );
}
window.Budget = Budget;