---
import Subheader from '@ui/Subheader.astro'
import Trending from '@ui/Trending.astro'

interface TrackingItem {
  status?: 'success' | 'warning' | 'danger'
  label: string
}

// Mirrors the uptime history shown in docs/content/ui/components/tracking.mdx.
const uptime: TrackingItem[] = [
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'danger', label: 'Downtime' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'warning', label: 'Big load' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'danger', label: 'Downtime' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { label: 'No data' },
  { label: 'No data' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
  { status: 'success', label: 'Operational' },
]
---

<div class="card">
  <div class="card-body">
    <div class="d-flex align-items-center">
      <Subheader>Status monitoring</Subheader>
      <div class="ms-auto lh-1">
        <div class="dropdown">
          <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Current month </a>
          <div class="dropdown-menu dropdown-menu-end">
            <a class="dropdown-item active" href="#">Current month</a>
            <a class="dropdown-item" href="#">Last month</a>
            <a class="dropdown-item" href="#">Last 3 months</a>
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex align-items-baseline">
      <div class="h1 mb-3 me-2">99.5%</div>
      <div class="me-auto">
        <Trending value={2} />
      </div>
    </div>
    <div class="mt-2">
      <div class="tracking">
        {uptime.map((item) => <div class:list={['tracking-block', item.status && `bg-${item.status}`]} data-bs-toggle="tooltip" data-bs-placement="top" title={item.label} />)}
      </div>
    </div>
  </div>
</div>