import { mergeProps } from "@base-ui/react";
import * as React from "react";
import { cn } from "tailwind-variants";

export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
  children: React.ReactNode;
}

export const Slot = React.forwardRef<HTMLElement, SlotProps>(
  ({ children, className: externalClassName, ...restProps }, ref) => {
    if (!React.isValidElement(children)) {
      return null;
    }

    const child = children as React.ReactElement<Record<string, unknown>>;
    const childProps = child.props || {};

    const mergedClassName = cn(
      childProps.className as string | undefined,
      externalClassName,
    );

    const otherMergedProps = mergeProps(childProps, restProps);

    return React.cloneElement(child, {
      ...otherMergedProps,
      className: mergedClassName,
      ref,
    });
  },
);

Slot.displayName = "Slot";