import * as React from 'react';
import clsx from 'clsx';
import { twMerge } from '../twMerge';
const ALIGN_ITEMS_MAP = {
    center: 'twa:items-center',
    'flex-start': 'twa:items-start',
    start: 'twa:items-start',
    'flex-end': 'twa:items-end',
    end: 'twa:items-end',
    stretch: 'twa:items-stretch',
    baseline: 'twa:items-baseline',
};
const FLEX_DIRECTION_MAP = {
    row: 'twa:flex-row',
    column: 'twa:flex-col',
};
const JUSTIFY_CONTENT_MAP = {
    'space-between': 'twa:justify-between',
    'space-around': 'twa:justify-around',
    'space-evenly': 'twa:justify-evenly',
    'space-start': 'twa:justify-start',
    'space-end': 'twa:justify-end',
    center: 'twa:justify-center',
};
const FLEX_WRAP_MAP = {
    wrap: 'twa:flex-wrap',
    nowrap: 'twa:flex-nowrap',
    'wrap-reverse': 'twa:flex-wrap-reverse',
};
export const Flex = React.forwardRef((props, ref) => {
    const { className: _, flexDirection, alignItems, justifyContent, flexWrap, as, ...domProps } = props;
    const className = clsx('twa:flex', 'twa:box-border', FLEX_DIRECTION_MAP[flexDirection], ALIGN_ITEMS_MAP[alignItems], JUSTIFY_CONTENT_MAP[justifyContent], FLEX_WRAP_MAP[flexWrap]);
    const Cmp = (as || 'div');
    return (React.createElement(Cmp, { ref: ref, ...domProps, className: twMerge(className, props.className) }));
});
export const Box = React.forwardRef((props, ref) => {
    const { className, as, ...domProps } = props;
    const Cmp = (as || 'div');
    return (React.createElement(Cmp, { ref: ref, ...domProps, className: twMerge('twa:box-border', className) }));
});
