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

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

interface IColProp extends IJDalignProp {
    wlg?: number;
    lg?: number;
    md?: number;
    sm?: number;
    full?: number;
}
export const Mr: React.FC<IJDalignProp> = ({ mr = true, ...props }) => {
    return <JDalign mr={mr || true} {...props} />
}
export const Mb: React.FC<IJDalignProp> = ({ mb = true, ...props }) => {
    return <JDalign mb={mb || true} {...props} />
}


export const Col: React.FC<IColProp> = ({ 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;
    vEnd?: boolean;
    end?: boolean;
    column?: boolean;
    oneone?: boolean;
    grow?: boolean;
}

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

interface ITextAlign extends IJDalignProp {
    center: boolean;
    left: boolean;
    right: boolean;
}

export const AlignText: React.FC<ITextAlign> = ({ center, left, right, ...props }) => {

    let align: "left" | "right" | "center" = "center";
    if (center) {
        align = "center"
    } else if (left) {
        align = "left"
    } else if (right) {
        align = "right"
    }

    return <JDalign text={align} {...props} />
};

