---
import Subheader from '@ui/Subheader.astro'
import Chart from '@shared/components/demo/Chart.astro'
import LegendList from '@ui/LegendList.astro'
import Legend from '@ui/Legend.astro'
---

<div class="card">
  <div class="card-body">
    <div class="d-flex align-items-start justify-content-between gap-3 mb-2">
      <div class="mb-3">
        <Subheader>Monthly recurring revenue</Subheader>
        <div class="d-flex align-items-baseline gap-2 mt-1">
          <div class="h1 mb-0">$92,400</div>
          <div class="text-green fw-medium">+9.5%</div>
        </div>
      </div>

      <LegendList>
        <Legend color="primary" text="This year" />
        <Legend color="secondary" text="Last year" />
      </LegendList>
    </div>

    <Chart chartId="crm-mrr-overview" height={15} label="Monthly recurring revenue" />
  </div>
</div>