import { forwardRef } from '@wordpress/element';
import clsx from '../../../utils/clsx';
import {
    gapStyle,
    marginStyle,
    marginTopStyle,
    paddingStyle,
    paddingTopStyle,
} from '../../../utils/styles';

const InlineStack = forwardRef(
    (
        {
            id,
            style,
            className = '',
            margin,
            marginTop,
            padding,
            paddingTop,
            as: Component = 'div',
            align = 'start',
            blockAlign = 'center',
            direction = 'row',
            gap,
            wrap = true,
            children,
            onClick,
            onBlur,
            onContextMenu,
            onDoubleClick,
            ...rest
        },
        ref,
    ) => {
        const styles = {
            ...style,
            ...marginStyle(margin),
            ...marginTopStyle(marginTop),
            ...paddingStyle(padding),
            ...paddingTopStyle(paddingTop),
            ...gapStyle(gap),
        };

        const classes = clsx(
            'flex',
            `justify-${align}`,
            `items-${blockAlign}`,
            direction === 'row' ? 'flex-row' : 'flex-row-reverse',
            wrap ? 'flex-wrap' : 'flex-nowrap',
            className,
        );

        return (
            <Component
                ref={ref}
                id={id}
                style={styles}
                className={classes}
                onClick={onClick}
                onBlur={onBlur}
                onContextMenu={onContextMenu}
                onDoubleClick={onDoubleClick}
                {...rest}
            >
                {children}
            </Component>
        );
    },
);

export default InlineStack;
