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

const { className } = Astro.props;
---

<div class:list={['card', 'vstack', className]}>
  <div class="img-header">
    <slot name="img-header" />
  </div>
  <div class="title">
    <slot name="title" />
  </div>

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

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

<style lang="scss">
  .card {
    background-color: var(--prj-surface-2);
    color: var(--prj-surface-text);
    border: 1px solid var(--prj-surface-2);
    border-radius: var(--prj-border-radius);
    box-shadow: 5px 5px 5px 5px var(--prj-shadow);

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

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

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

  .img-header {
    :global(img) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

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