---
import Subheader from '@ui/Subheader.astro'
import Chart from '@shared/components/demo/Chart.astro'
import DropdownDays from '@shared/components/demo/DropdownDays.astro'
import Trending from '@ui/Trending.astro'
---

<div class="card">
  <div class="card-body">
    <div class="d-flex align-items-center">
      <Subheader>Active subscriptions</Subheader>
      <div class="ms-auto lh-1">
        <DropdownDays id="active-users" label="Select time range for active users" />
      </div>
    </div>
    <div class="d-flex align-items-baseline">
      <div class="h1 mb-3 me-2">2,986</div>
      <div class="me-auto">
        <Trending value={4} />
      </div>
    </div>

    <Chart chartId="active-users" size="sm" label="Active subscriptions" />
  </div>
</div>