import React from "react";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";

const useStyles = makeStyles((theme: Theme) => createStyles({
    root: {
        display: "flex",
        alignItems: "center"
    },
    icon: {
        marginRight: theme.spacing(1),
        display: "flex",
        alignItems: "center"
    }
}))

export type LabelWithIconProps = {
    icon: React.ReactNode,
    children: React.ReactChildren,
}

export function LabelWithIcon({ icon, children }: LabelWithIconProps) {
    const classes = useStyles();

    return <div className={ classes.root }>
        <div className={ classes.icon }>{ icon }</div>
        { children }
    </div>
}