import React from "react";
import JDalign, { IJDalignProp } from './Align';

export const Grid: React.FC<IJDalignProp> = (props) => {
    return <JDalign grid {...props} />
}

interface IRowProp extends IJDalignProp {
    wlg?: number;
    lg?: number;
    md?: number;
    sm?: number;
    full?: number;
}

export const Row: React.FC<IRowProp> = ({ wlg, lg, md, sm, full, ...props }) => {
    return <JDalign col={{ wlg, lg, md, sm, full }} {...props} />
}

interface IFlexProp extends IJDalignProp {
    center?: boolean;
    vCenter?: boolean;
    between?: boolean;
    around?: boolean;
    wrap?: boolean;
    end?: boolean;
    column?: boolean;
    oneone?: boolean;
    grow?: boolean;
}

export const Flex: React.FC<IFlexProp> = ({ center, vCenter, between, around, wrap, end, column, oneone, grow, ...props }) => {
    return <JDalign flex={{
        center, vCenter, between, around, wrap, end, column, oneone, grow
    }} {...props} />
}
