import React from 'react';

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

export const Slot = React.forwardRef<HTMLElement, SlotProps>(
  ({ children, ...props }, ref) => {
    if (React.isValidElement(children)) {
      return React.cloneElement(children, {
        ...props,
        ...(children.props as any),
        ref: (node: any) => {
          if (typeof ref === 'function') ref(node);
          else if (ref) (ref as any).current = node;
          
          const childRef = (children as any).ref;
          if (typeof childRef === 'function') childRef(node);
          else if (childRef) childRef.current = node;
        },
        className: `${props.className || ''} ${(children.props as any).className || ''}`.trim(),
        style: { ...props.style, ...(children.props as any).style }
      } as any);
    }
    return <>{children}</>;
  }
);
Slot.displayName = 'Slot';