---
import CardActions from '@ui/CardActions.astro'
import Icon from '@ui/Icon.astro'
import Badge from '@ui/Badge.astro'
import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro'
import crmDashboard from '@data/crm-dashboard.json'
import CardTitle from '@ui/CardTitle.astro'

const churn = crmDashboard.churn_risk
---

<div class="card h-100">
  <div class="card-header">
    <div class="d-flex align-items-center gap-2">
      <Icon name="alert-triangle" class="text-red" />
      <CardTitle class="mb-0">Churn risk</CardTitle>
    </div>
    <CardActions>
      <Badge text={`${churn.items.length} accounts`} color="red" />
    </CardActions>
  </div>

  <ListGroup flush>
    {
      churn.items.map((item) => (
        <ListGroupItem>
          <div class="row align-items-center g-2">
            <div class="col">
              <div class="fw-medium">{item.company}</div>
              <div class="small text-secondary">Last contact: {item.last_contact}</div>
            </div>
            <div class="col-auto">
              <span class={`badge bg-${item.level_color}-lt`}>{item.level}</span>
            </div>
            <div class="col-auto fw-semibold">{item.amount}</div>
          </div>
        </ListGroupItem>
      ))
    }
  </ListGroup>
</div>