---
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>Sales overview</Subheader>
        <div class="d-flex align-items-baseline gap-2 mt-1">
          <div class="h1 mb-0">$284,300</div>
          <div class="text-green fw-medium">+12.4%</div>
        </div>
      </div>

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

    <Chart chartId="sales-overview" height={15} label="Sales overview" />
  </div>
</div>