import type { IndicatorProps } from '@zag-js/carousel';
import { mergeProps } from 'zag-ripple';
import { trackSplit, track } from 'ripple';
import { useCarouselContext } from './use-carousel-context';
import { ark } from '../factory';
import type { HTMLProps, MaybeTracked, PolymorphicProps } from '../../types';

export interface CarouselIndicatorBaseProps extends PolymorphicProps<'button'>, IndicatorProps {}
export interface CarouselIndicatorProps extends HTMLProps<'button'>, CarouselIndicatorBaseProps {}

export component CarouselIndicator(props: MaybeTracked<CarouselIndicatorProps>) {
  const [index, readOnly, children, localProps] = trackSplit(props, [
    'index',
    'readOnly',
    'children',
  ]);
  const carousel = useCarouselContext();

  let mergedProps = track(
    () => mergeProps(
      @carousel.getIndicatorProps({ index: @index, readOnly: @readOnly }),
      @localProps,
    ),
  );

  <ark.button {...@mergedProps}>
    <@children />
  </ark.button>
}