TeachingPopover

let mkTeachingPopoverBody (pageNum: int) = 
    Fui.teachingPopoverBody [
        teachingPopoverBody.media (
            Fui.image [
                image.fit.cover
                image.src "https://i0.wp.com/www.smartprix.com/bytes/wp-content/uploads/2023/06/Untitled-design-88.jpg?fit=1200%2C675&ssl=1"
            ]
        )
        teachingPopoverBody.children [
            Fui.teachingPopoverTitle "Teaching Bubble Title"
            Fui.text $"This is page {pageNum}"
        ]
    ]

[<ReactComponent>]
let TeachingPopoverTest() =
    Fui.teachingPopover [
        teachingPopover.withArrow true
        teachingPopover.positioning [
            positioning.offset [
                offset.crossAxis 200
            ]
        ]
        teachingPopover.openOnHover true
        teachingPopover.children [
            Fui.teachingPopoverTrigger (
                Fui.button [
                    button.text "Teaching Popover Trigger"
                ]
            )
            Fui.teachingPopoverSurface [
                Fui.teachingPopoverHeader "Tips"
                Fui.teachingPopoverCarousel [
                    mkTeachingPopoverBody 1
                    mkTeachingPopoverBody 2
                    mkTeachingPopoverBody 3
                ]
                Fui.teachingPopoverActions [
                    Fui.teachingPopoverButton [
                        teachingPopoverButton.buttonType.secondary
                        teachingPopoverButton.altStepText "Close"
                        teachingPopoverButton.text "Back"
                    ]
                    Fui.teachingPopoverPageCount [
                        teachingPopoverPageCount.countStyle.text
                        teachingPopoverPageCount.children (fun currentPage totalPage ->
                            Fui.text $"{currentPage + 1} of {totalPage}"
                        )
                    ]
                    Fui.teachingPopoverButton [
                        teachingPopoverButton.buttonType.primary
                        teachingPopoverButton.altStepText "Finish"
                        teachingPopoverButton.text "Next"
                    ]
                ]
            ]
        ]
    ]