<script setup>
import { ref, watch } from 'vue'

const type = ref();
const card = ref();
defineProps(['title', 'description', 'type'])

watch(type, (prev, current) => {
  card.style.toggleClass('type-a', current.match(/a/i))
  card.style.toggleClass('type-b', current.match(/b/i))
})

</script>

<template>
  <section ref="card" class="card">
    <footer>{{ type }}</footer>
    <header><h1>{{ title }}</h1></header>
    <main>{{ description }}</main>
  </section>
</template>

<style>
  .card {
    background-color: lightgrey;
    height: 100%;
    width: 100%;
  }
  .card.type-a {
    background-color: red;
  }
  .card.type-b {
    background-color: orange;
  }
  .card footer {
    float: right;
  }
  .card h1 {
    size: 1em;
  }
</style>