<script setup>
import { computed } from "vue";
import { Icon } from "@iconify/vue";
defineOptions({ name: "ShwfedBlockIconRuntime" });
const block = defineModel("block", { type: null, ...{ required: true } });
defineProps({
  configure: { type: Function, required: false }
});
const DEFAULT_SIZE = 8;
const iconSize = computed(() => block.value.size ?? DEFAULT_SIZE);
const iconStyle = computed(() => {
  const s = { fontSize: `calc(${iconSize.value} * 0.25rem)` };
  if (block.value.color) s.color = block.value.color;
  return s;
});
const circleStyle = computed(() => ({
  padding: `calc(${iconSize.value} * 0.125rem)`,
  backgroundColor: `color-mix(in srgb, ${block.value.color || "currentColor"} 20%, white)`
}));
</script>

<template>
  <div class="flex h-full w-full items-center justify-center">
    <div
      v-if="block.circle"
      class="flex items-center justify-center rounded-full"
      :style="circleStyle"
    >
      <Icon
        v-if="block.icon"
        :icon="block.icon"
        :style="iconStyle"
      />
    </div>
    <Icon
      v-else-if="block.icon"
      :icon="block.icon"
      :style="iconStyle"
    />
  </div>
</template>
