import { defineComponent } from 'vue'
import type { Block } from '../layout.types'

export default defineComponent({
  props: {
    block: {
      type: Object as () => Block,
      required: true
    }
  },
  setup(props) {
    return () => (
      <div
        class="w-full h-full flex justify-center items-center font-bold bg-cover bg-center bg-no-repeat"
        style={{
          backgroundColor: props.block.background || 'white',
          color: props.block.color || 'black',
          backgroundImage: props.block.icon ? `url('${props.block.icon}')` : '',
          fontSize: 'calc(var(--block-size) / 4.4)'
        }}
      >
        <div>{props.block.text}</div>
      </div>
    )
  }
})