component ChannelCard {
  props {
    title = ""
    description = ""
    href = ""
    icon = ""
    actionLabel = ""
    class = ""
  }

  view {
    <article
      class="wire-channel-card group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-sm,var(--wire-shadow-1))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary)] hover:shadow-[var(--wire-shadow-md,var(--wire-shadow-1))] sm:p-7 {class}"
    >
      <div class="flex min-h-12 items-start justify-between gap-4">
        {#if icon}
          <span
            class="wire-channel-card__icon grid size-12 shrink-0 place-items-center rounded-xl border border-[var(--wire-color-border)]"
            aria-hidden="true"
          >
            <span class="{icon} block size-5"></span>
          </span>
        {/if}

        <div class="flex min-w-0 flex-1 justify-end">
          <slot />
        </div>
      </div>

      {#if title}
        <h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text)]">
          {title}
        </h3>
      {/if}

      {#if description}
        <p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted,var(--wire-color-muted))]">
          {description}
        </p>
      {/if}

      {#if href}
        <a
          href="{href}"
          class="mt-6 inline-flex items-center justify-between gap-3 border-t border-[var(--wire-color-border)] pt-5 text-sm font-semibold text-[var(--wire-color-primary)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary)] focus-visible:ring-offset-2"
          aria-label="Explore {title}"
        >
          <span>{actionLabel || "Explore " + title}</span>
          <span class="transition-transform duration-200 group-hover:translate-x-1" aria-hidden="true">→</span>
        </a>
      {/if}
    </article>
  }
}