<script setup lang="ts">
const props = defineProps({
  gradient: {
    type: String,
    default: '90deg, #FFC0CB 0%, #FFC0CB 100%',
  },
  aspect: {
    type: String,
    default: '16/9',
  },
})

const elem = ref<HTMLElement>()
const size = computed(() => {
  return {
    width: elem.value?.getBoundingClientRect().width.toFixed(0),
    height: elem.value?.getBoundingClientRect().height.toFixed(0),
  }
})
</script>

<template>
  <div
    ref="elem"
    class="gradient-background flex justify-center items-center"
    :style="`aspect-ratio: ${aspect};`"
  >
    <ClientOnly>
      <h1 class="text-white/80 drop-shadow-2xl text-sm font-bold">
        {{ size.width }} x {{ size.height }}
      </h1>
    </ClientOnly>
  </div>
</template>

<style scoped>
.gradient-background {
  @apply rounded-lg;
  @apply bg-gradient-to-r from-indigo-800 to-purple-600;
}
</style>
