<script>
  export let card;

  function useCard() {
    console.log(card.title);
  }
</script>

<article class="card">
  <div class="card-image-wrap">
    <img src={card.imageUrl} alt={card.title} class="card-image" loading="lazy" />
  </div>
  <div class="card-body">
    <h3 class="card-title">{card.title}</h3>
    <p class="card-description">{card.description}</p>
    <button type="button" class="btn-use" onclick={useCard}>Use</button>
  </div>
</article>

<style>
  .card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #1a1a1a);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.2s, transform 0.2s;
  }

  .card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  }

  .card-image-wrap {
    aspect-ratio: 400 / 240;
    overflow: hidden;
    background: var(--bg-muted, #252525);
  }

  .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .card-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
  }

  .card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #f0f0f0);
  }

  .card-description {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-muted, #a0a0a0);
    flex: 1;
  }

  .btn-use {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    background: var(--accent, #3b82f6);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, filter 0.2s;
  }

  .btn-use:hover {
    filter: brightness(1.1);
  }
</style>
