<template>
  <div :style="ledStyle" class="w-full h-full flex items-center justify-center"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  width: number
  height: number
  image?: string
  styles: any
  part?: string
  state?: string
  led_color: string
  led_set_bright: number
}>()

const ledStyle = computed(() => {
  // LVGL LED 亮度：0~255，LV_LED_BRIGHT_MIN 默认 80（约 31%）
  // 亮度映射：0 → 31%，255 → 100%，用 filter: brightness() 模拟变暗效果
  const bright = props.led_set_bright / 255
  const effectiveBright = 0.31 + 0.69 * bright
  const r = Math.min(props.width, props.height) / 2
  return {
    borderRadius: `${r}px`,
    backgroundColor: props.led_color,
    filter: `brightness(${effectiveBright}) blur(${bright}px)`
  }
})
</script>
