import { h, ref } from 'vue'

const ActiveComponent = function(props, { attrs, slots }) {
  const key = props.pkey
  const isActive = ref(false)

  function onMouseover() {
    console.log('activated ' + key)
    isActive.value = true
  }

  function onMouseleave() {
    console.log('disabled ' + key)
    isActive.value = false
  }

  return h(props.as, {
    ...attrs,
    class: 'hello',
    onMouseover,
    onMouseleave,
  }, [
    slots,
    slots.default({ isActive }),
  ])
}

ActiveComponent.props = {
  as: {
    type: String,
    default: 'div',
  },
  pkey: {
    type: Number,
    required: true,
  },
}

export default ActiveComponent