---
/**
 * SlotMeter.astro
 * ---------------------------------------------------------------------------
 * Visual "X of Y slots open" capacity meter for a store category. Reads a slot
 * status (open + total) and renders a progress-style bar plus an open/closed
 * pill. The fill width reflects open/total; when open === 0 it shows CLOSED.
 */
import Icon from '@components/Icon.astro';

interface Props {
  /** Category label, e.g. "Card orders" or "3D-print slots". */
  label: string;
  /** mdi icon for the row. */
  icon: string;
  /** Number of currently open slots. */
  open: number;
  /** Total slots for the category. */
  total: number;
}

const { label, icon, open, total } = Astro.props;
const closed = open <= 0;
const pct = total > 0 ? Math.max(0, Math.min(100, (open / total) * 100)) : 0;
---

<div
  class="flex flex-col gap-3 rounded-xl border p-4"
  style="border-color: var(--color-border); background: var(--color-surface-raised);"
>
  <div class="flex items-center justify-between gap-3">
    <span class="inline-flex items-center gap-2 font-sans text-sm font-semibold" style="color: var(--color-text);">
      <Icon name={icon} class="h-5 w-5" style="color: var(--color-accent);" />
      {label}
    </span>
    <span
      class="pill"
      style={closed
        ? 'background: color-mix(in srgb, #e55 15%, transparent); border-color: color-mix(in srgb, #e55 40%, transparent);'
        : undefined}
    >
      {closed ? 'Closed' : 'Open'}
    </span>
  </div>

  <div class="flex items-center justify-between text-sm" style="color: var(--color-text-muted);">
    <span>{open} of {total} slots open</span>
    <span class="font-eyebrow text-xs" style="color: var(--color-text-subtle);">{closed ? '0%' : `${Math.round(pct)}%`}</span>
  </div>

  <div
    class="h-2 w-full overflow-hidden rounded-full"
    style="background: color-mix(in srgb, var(--color-border) 60%, transparent);"
    role="meter"
    aria-valuenow={open}
    aria-valuemin="0"
    aria-valuemax={total}
    aria-label={`${label}: ${open} of ${total} slots open`}
  >
    <div
      class="h-full rounded-full transition-[width] duration-500"
      style={`width: ${pct}%; background: ${closed ? '#e55' : 'var(--color-accent)'};`}
    >
    </div>
  </div>
</div>