<template>
  <!-- todo use javascript media breakpoint instead of display classes so we dont double-render the slot -->
  <div>
    <!-- tablets and desktops get a card outline -->
    <v-card class="d-none d-sm-block phone-card" :elevation="4" :title="title">
      <slot/>
    </v-card>
    <!-- phones use the entire screen -->
    <div class="d-sm-none pa-0">
      <v-card-title>{{title}}</v-card-title>
      <slot class="pa-0"/>
    </div>
  </div>
</template>

<script setup>
import {useStore} from "@/store/store";
const s = useStore()
const props = defineProps(['title'])

</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;
</style>
