"use client"

import * as React from "react"

/**
 * `Animate` is the replacement for `@wordpress/components`' `Animate` - **1 import** in
 * `QuestionnairePage`.
 *
 * A RENDER PROP, NOT A WRAPPER, WHICH IS WHY IT IS A COMPONENT AND NOT A CLASS NAME. WordPress hands
 * its child a className to put wherever it likes, and the call site puts it on an ItemGroup two
 * levels down:
 *
 * <Animate type="appear">{({ className }) => <ItemGroup className={className}... />}</Animate>
 *
 * Keeping that shape is what makes the swap one line.
 *
 * `appear` is the only type any call site uses. WP's appear slides in from the top and fades, which
 * is what these three utilities do - they come from the enter/exit plugin in `tailwind.config.js`,
 * so a missing one is a silent no-op rather than an error.
 */

export type AnimateType = "appear"

export interface AnimateProps {
  type?: AnimateType
  children: (props: { className?: string }) => React.ReactNode
}

function Animate({ type, children }: AnimateProps) {
  const className =
    type === "appear" ? "animate-in fade-in-0 slide-in-from-top-2" : undefined

  return <>{children({ className })}</>
}

export { Animate }