<script>
  let { stats } = $props();
</script>

<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-value orange">{stats.needs_review}</div>
    <div class="stat-label">Needs Review</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{stats.pending}</div>
    <div class="stat-label">Pending</div>
  </div>
  <div class="stat-card">
    <div class="stat-value red">{stats.blocked}</div>
    <div class="stat-label">Blocked</div>
  </div>
  <div class="stat-card">
    <div class="stat-value green">{stats.approved}</div>
    <div class="stat-label">Approved</div>
  </div>
  <div class="stat-card">
    <div class="stat-value">{stats.shared}</div>
    <div class="stat-label">Shared</div>
  </div>
  <div class="stat-card">
    <div class="stat-value violet">{stats.local_only}</div>
    <div class="stat-label">Local Only</div>
  </div>
</div>

<style>
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
  }

  @media (max-width: 1200px) {
    .stats-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 768px) {
    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>
