<script setup>
import { computed } from "vue";
import { Icon } from "@iconify/vue";
import { Effect } from "effect";
import { cel as $cel } from "../../../../../utils/cel";
import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
import { JUSTIFY_CLASS } from "../../../utils/runtime";
defineOptions({ name: "ShwfedTableIconRendererRuntime" });
const props = defineProps({
  column: { type: null, required: true },
  ctx: { type: Object, required: true }
});
const celContext = injectCELContext();
const iconName = computed(() => {
  const v = props.ctx.cell.getValue();
  return typeof v === "string" && v.length > 0 ? v : "";
});
const color = computed(() => {
  if (!props.column.color) return void 0;
  try {
    const v = Effect.runSync($cel(props.column.color, {
      ...celBindings(celContext),
      row: props.ctx.row?.original,
      index: props.ctx.row?.index
    }));
    return typeof v === "string" && v.length > 0 ? v : void 0;
  } catch (e) {
    console.error("[shwfed-table] icon color expression failed", e);
    return void 0;
  }
});
const justifyClass = computed(
  () => JUSTIFY_CLASS[props.column.align ?? "center"] ?? JUSTIFY_CLASS.center
);
</script>

<template>
  <div :class="['w-full h-full py-2 px-1 flex items-center text-sm', justifyClass]">
    <Icon
      v-if="iconName"
      :icon="iconName"
      :style="color ? { color } : void 0"
    />
  </div>
</template>
