import { createStyles, makeStyles } from "@material-ui/core/styles";
import { Paper, PaperProps, Typography, TypographyProps } from "@material-ui/core";
import classNames from "classnames";
import React from "react";

const useSectionStyles = makeStyles(theme => createStyles({
    root: {
        padding: theme.spacing(2),
    }
}))

export const Section = ({ children, ...props }: PaperProps) => {
    const classes = useSectionStyles();

    return <Paper { ...props } className={ classNames(classes.root, props.className) }>
        { children }
    </Paper>
}

export const Label = ({ children }: TypographyProps) => {
    return <Typography variant="subtitle2" className="proposal__header">{ children }</Typography>
}