<template>
  <div :style="component.style" :class="{ 'default-div-style': !hasCustomStyle }">
    <!-- Optional: Add default content or a slot here if needed for nested components -->
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue';

const props = defineProps({
  component: Object,
});

const hasCustomStyle = computed(() => {
  return props.component.style && (props.component.style.backgroundColor || props.component.style.border);
});
</script>

<style scoped>
div {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.default-div-style {
  border: 1px dashed var(--border-color); /* Use a theme variable for consistency */
  background-color: var(--bg-color); /* Optional: slight background to make it stand out */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color-darker);
}

.default-div-style::after {
  content: 'Div Component';
  font-size: 0.9em;
  opacity: 0.6;
}
</style>
