'use client';
import * as React from 'react';
import { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';
import { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';
import { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
 * Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`
 * hooks.
 *
 * TeachingPopoverCarouselFooter contains previous/next buttons configured for carousel navigation, and a root slot for page count and/or page index navigation.
 */ export const TeachingPopoverCarouselFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
    const state = useTeachingPopoverCarouselFooter_unstable(props, ref);
    useTeachingPopoverCarouselFooterStyles_unstable(state);
    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterStyles_unstable')(state);
    return renderTeachingPopoverCarouselFooter_unstable(state);
});
TeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';