---
export interface Props {
  title?: string;
}
---

<div class="card vstack">
  <div class="title">
    <slot name="title" />
  </div>

  <div class="content flex-grow mb-3">
    <slot />
  </div>

  <div class="footer">
    <slot name="footer" />
  </div>
</div>

<style>
  .card {
    background-color: var(--prj-surface-1);
    color: var(--prj-surface-text);
    border: 1px solid var(--prj-accent-bg);
    border-radius: 8px;

    padding: var(--prj-spacing-2) var(--prj-spacing-3);
  }

  .card :global(a) {
    text-decoration-line: none;
  }

  .card :global(a):hover {
    text-decoration-line: underline;
  }

  .title > :global(:last-child) {
    margin-bottom: var(--prj-spacing-2);
  }
</style>