<script setup lang="ts">
import { useCover } from '@/stores/cover';
import { storeToRefs } from 'pinia';

const store = useCover();
const { frontUri, backUri } = storeToRefs(store);
</script>
<template>
  <div class="flex flex-row grow">
    <div class="grow p-4">
      <h2 class="text-lg font-medium pb-4">Front</h2>
      <iframe
        :src="frontUri"
        class="w-full aspect-A4 border border-slate-500 rounded"
      />
    </div>
    <div class="grow p-4">
      <h2 class="text-lg font-medium pb-4">Back</h2>
      <iframe
        :src="backUri"
        class="w-full aspect-A4 border border-slate-500 rounded"
      />
    </div>
  </div>
</template>