<script setup lang="ts">
import type { BaseNamedControl } from '@/components/inspector/controls'

const {
  control,
  id,
} = defineProps<{
  control: BaseNamedControl
  /**
   * Input ID for an associated label.
   */
  id?: string
}>()

// TODO: reset function
function reset(event: MouseEvent) {
  event.preventDefault()
}
</script>

<template>
  <!-- label -->
  <label
    :for="id"
    class="tw:text-right control-label"
    :class="{ 'control-label__disabled': control.disabled }"
    @dblclick="reset"
  >
    {{ control.name }}
  </label>

  <!-- control -->
  <slot />
</template>

<style scoped></style>
