import type { Bindings } from 'alpinejs'

import { $slider, type WithSlider } from '../SliderCTX'

export const dynamicHeight: ThisType<WithSlider> & Bindings<DynamicHeight> = {
  [':style']() {
    const height = this[$slider].focusedSize
    return {
      maxHeight: height ? `${height}px` : 'max-content',
      transition: 'max-height 300ms',
    }
  },
}

export type DynamicHeight = {
  ':style': Partial<CSSStyleDeclaration>
}