import type { FC } from 'react';
import React from 'react';
import cx from 'classnames';

const CLASSNAME = 'PageCol';

type Width = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
interface Props {
    children?: React.ReactNode;
    className?: string;
    xs?: Width;
    sm?: Width;
    md?: Width;
    lg?: Width;
    xl?: Width;
    xxl?: Width;
}

const PageCol: FC<Props> = ({ children, className, xs, sm, md, lg, xl, xxl }) => {
    const classes = cx(
        CLASSNAME,
        className,
        xs && `grid-col-${xs}`,
        sm && `grid-col-sm-${sm}`,
        md && `grid-col-md-${md}`,
        lg && `grid-col-lg-${lg}`,
        xl && `grid-col-xl-${xl}`,
        xxl && `grid-col-xxl-${xxl}`
    );

    return (
        <div className={classes} data-testid={CLASSNAME}>
            {children}
        </div>
    );
};

export default PageCol;