"use client"
import { LayoutGroup } from "motion/react"
import { uid } from "radash"
import React, { ComponentPropsWithoutRef, useRef } from "react"

/**
 * Really simple convenience helper for making isolated framer motion component layout groups.
 */
export const NamespacedLayoutGroup = (
  props: ComponentPropsWithoutRef<typeof LayoutGroup>,
) => {
  const id = useRef(uid(8))

  return <LayoutGroup id={id.current} {...props} />
}