import React, {FC, PropsWithChildren} from "react";
import classNames from "classnames";

export type containerProps = {
    withBorder?: boolean;
    padding?: string; // paddding classname
    margin?: string; // margin classname
    alignment?: 'left' | 'center' | 'right';
}

export const Container: FC<containerProps & PropsWithChildren> = ({withBorder = true, padding, children, alignment = 'center', margin}) => {
    return <div className={classNames('space-y-5 w-full flex flex-col ', {
        'items-start': alignment === 'left',
        'items-center': alignment === 'center',
        'items-end': alignment === 'right',
        'border-px border-gray-200 border-opacity-80 rounded-1': withBorder,
        'mt-5': !margin,
        [margin || '--no-margin']: margin,
        'p-6': withBorder && !padding,
        [padding || '--no-padding']: padding
    })}>{children}</div>
}