import React from 'react';
import { makeStyles, Badge } from '@material-ui/core';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    highlight: {
        background: 'pink',
        opacity: (props) => (props.highlight ? 0.2 : 0)
    },
    nudge: {
        height: theme.spacing(1)
    },
    xxs: {
        height: theme.spacing(2)
    },
    xs: {
        height: theme.spacing(3)
    },
    sm: {
        height: theme.spacing(4)
    },
    md: {
        height: theme.spacing(5)
    },
    lg: {
        height: theme.spacing(8)
    },
    xl: {
        height: theme.spacing(12)
    },
    xxl: {
        height: theme.spacing(20)
    }
}));
export const LayoutUnit = (props) => {
    const classes = useStyles(props);
    let spaceUnit;
    const { unit, highlight } = props;
    switch (unit) {
        case 'nudge':
            spaceUnit = (React.createElement("div", { className: clsx(classes.nudge, classes.highlight) }, highlight && React.createElement(Badge, { color: "secondary", badgeContent: "Nudge" })));
            break;
        case 'xxs':
            spaceUnit = (React.createElement("div", { className: clsx(classes.xxs, classes.highlight) }, highlight && React.createElement(Badge, { color: "secondary", badgeContent: "XXS" })));
            break;
        case 'xs':
            spaceUnit = (React.createElement("div", { className: clsx(classes.xs, classes.highlight) }, highlight && React.createElement(Badge, { color: "secondary", badgeContent: "XS" })));
            break;
        case 'sm':
            spaceUnit = (React.createElement("div", { className: clsx(classes.sm, classes.highlight) }, highlight && React.createElement(Badge, { color: "secondary", badgeContent: "SM" })));
            break;
        case 'md':
            spaceUnit = (React.createElement("div", { className: clsx(classes.md, classes.highlight) }, highlight && React.createElement(Badge, { color: "secondary", badgeContent: "MD" })));
            break;
        case 'lg':
            spaceUnit = (React.createElement("div", { className: clsx(classes.lg, classes.highlight) }, highlight && React.createElement(Badge, { color: "secondary", badgeContent: "LG" })));
            break;
        case 'xl':
            spaceUnit = (React.createElement("div", { className: clsx(classes.xl, classes.highlight) }, highlight && React.createElement(Badge, { color: "secondary", badgeContent: "XL" })));
            break;
        case 'xxl':
            spaceUnit = (React.createElement("div", { className: clsx(classes.xxl, classes.highlight) }, highlight && React.createElement(Badge, { color: "secondary", badgeContent: "XXL" })));
            break;
        default:
    }
    return spaceUnit;
};
//# sourceMappingURL=LayoutUnit.js.map