"use client"
import React, { ElementRef, forwardRef } from "react"
import { useChangeAnimation, type UseChangeAnimationOptions } from "../../hooks"
import { Block } from "../Block"
import { InlineFlex } from "../InlineFlex"

export type ChangeAnimationProps = UseChangeAnimationOptions & {
  children: React.ReactNode
}

export const ChangeAnimation = forwardRef<
  ElementRef<typeof Block>,
  ChangeAnimationProps
>(function ChangeAnimation({ children, ...rest }, ref) {
  const { animationClassName, rerenderKey } = useChangeAnimation({ ...rest })
  return (
    <InlineFlex className={animationClassName} key={rerenderKey} ref={ref}>
      {children}
    </InlineFlex>
  )
})