<script setup>
import { computed } from "vue";
const props = defineProps({
  title: { type: String, required: false, default: "" },
  subtitle: { type: String, required: false, default: "" },
  icon: { type: String, required: false, default: "local_offer" },
  color: { type: String, required: false, default: "indigo" }
});
const item_class = computed(() => {
  return ["bg-" + props.color + "-4"];
});
const section_class = computed(() => {
  return ["text-white", "bg-" + props.color];
});
</script>

<template>
    <q-item :class="item_class" class="no-wrap q-pa-none text-white">
        <q-item-section class="q-pa-lg q-mr-none text-white" :class="section_class" side>
            <q-icon :name="icon" size="2rem" />
        </q-item-section>
        <q-item-section class="q-pa-md q-ml-none">
            <q-item-label class="text-h6 text-white">{{ title }}</q-item-label>
            <q-item-label caption class="text-white">{{ subtitle }}</q-item-label>
        </q-item-section>
    </q-item>
</template>
