---
/**
 * InterestCard.astro
 * ---------------------------------------------------------------------------
 * Generic highlight card used across interest pages (the spec's "Highlights
 * (Card Grid)" sections). Each card: an mdi icon, a bold title, and a body.
 * Spec emojis in the highlight tables are mapped to mdi icon names at the call
 * site.
 *
 * Optional `currently` prop restyles the card as a "what's active now" item
 * with a pulse dot, matching the spec's "Currently" sections.
 */
import Icon from '@components/Icon.astro';

interface Props {
  icon: string;
  title: string;
  /** Optional small status pill text, e.g. "Complete", "Reading". */
  status?: string;
  currently?: boolean;
  class?: string;
}

const { icon, title, status, currently = false, class: className = '' } = Astro.props;
---

<article
  class:list={[
    'card card-interactive flex h-full flex-col gap-3',
    className,
  ]}
>
  <div class="flex items-center justify-between gap-3">
    <span
      class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl"
      style={currently
        ? 'background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent);'
        : 'background: color-mix(in srgb, var(--color-secondary) 18%, transparent); color: var(--color-secondary);'}
      aria-hidden="true"
    >
      <Icon name={icon} class="h-6 w-6" />
    </span>
    {currently && (
      <span class="inline-flex items-center gap-1.5 font-eyebrow text-[0.65rem] uppercase tracking-[0.18em]" style="color: var(--color-accent);">
        <span class="h-2 w-2 rounded-full animate-pulse-glow" style="background: var(--color-accent);"></span>
        Active
      </span>
    )}
    {status && !currently && (
      <span class="pill">{status}</span>
    )}
  </div>
  <h3 class="font-display text-lg" style="color: var(--color-text);">{title}</h3>
  <div class="grow text-sm leading-relaxed" style="color: var(--color-text-muted);">
    <slot />
  </div>
</article>