---
/*
  Information atom (DESIGN_SYSTEM §2). kinds: fact (non-interactive), stack (with
  optional tooltip), status (dot + label; accent=active, amber=in development).
  Status meaning is never colour-only — dot + text always paired (COLOUR_SYSTEM §3.4).
*/
type Status = 'active' | 'in-development' | 'archived';

interface Props {
  kind?: 'fact' | 'stack' | 'status';
  status?: Status;
  label: string;
  tooltip?: string;
  class?: string;
}
const { kind = 'fact', status, label, tooltip, class: cls } = Astro.props;

const base =
  'inline-flex items-center gap-2 rounded-full border px-3 py-1.5 font-mono text-mono-label whitespace-nowrap';

const statusRing: Record<Status, string> = {
  active: 'border-accent/40 text-accent',
  'in-development': 'border-amber/40 text-amber',
  archived: 'border-line text-ink-muted',
};
const dotColor: Record<Status, string> = {
  active: 'bg-accent',
  'in-development': 'bg-amber',
  archived: 'bg-ink-faint',
};
---

{
  kind === 'status' && status ? (
    <span class:list={[base, statusRing[status], cls]}>
      <span
        class:list={[
          'inline-block h-2 w-2 rounded-full',
          dotColor[status],
          status === 'active' && 'status-dot--active',
        ]}
        aria-hidden="true"
      />
      {label}
    </span>
  ) : (
    <span class:list={[base, 'border-line bg-surface-1 text-ink-muted', cls]} title={tooltip}>
      {label}
    </span>
  )
}
