import { defineTrait } from '../define.js';

export const hoverable = defineTrait({
  name: 'hoverable',
  category: 'input-interaction',
  description: 'Pointer hover enter/leave state tracking',
  attributes: ['data-hoverable-hover'],
  events: [],
  config: [],
  setup({ host }) {
    function onPointerEnter() {
      host.setAttribute('data-hoverable-hover', '');
    }

    function onPointerLeave() {
      host.removeAttribute('data-hoverable-hover');
    }

    host.addEventListener('pointerenter', onPointerEnter);
    host.addEventListener('pointerleave', onPointerLeave);

    return () => {
      host.removeEventListener('pointerenter', onPointerEnter);
      host.removeEventListener('pointerleave', onPointerLeave);
      host.removeAttribute('data-hoverable-hover');
    };
  },
});
