---
/*
  Surface card (DESIGN_SYSTEM §3): flat, hairline border, depth via border-strong on
  hover — no drop shadow in dark. `interactive` makes the whole card a single link.
*/
interface Props {
  href?: string;
  interactive?: boolean;
  class?: string;
  ariaLabel?: string;
}
const { href, interactive = false, class: cls, ariaLabel } = Astro.props;

const base = 'rounded-md border border-line bg-surface-1 shadow-[var(--shadow-card)]';
const hover = interactive
  ? 'group block transition-colors duration-[--dur-standard] hover:border-line-strong focus-visible:border-line-strong'
  : '';
---

{
  href ? (
    <a href={href} class:list={[base, hover, cls]} aria-label={ariaLabel}>
      <slot />
    </a>
  ) : (
    <div class:list={[base, hover, cls]}>
      <slot />
    </div>
  )
}
