import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, Typography, Divider } from '@material-ui/core';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => ({
    root: {},
    yearTag: {
        color: theme.palette.common.white,
        padding: theme.spacing(1.5),
        paddingTop: theme.spacing(0.5),
        paddingBottom: theme.spacing(0.5),
        width: 20,
        height: 68,
        borderRadius: 24
    },
    yearLabel: {
        transform: 'rotate(90deg)'
    },
    background: (props) => ({
        background: props.year ? '#C1A1B8' : 'lightgrey'
    }),
    backgroundToday: {
        background: '#795C76'
    }
}));
export const MttYearTag = (props) => {
    const { children, year = false, today } = props;
    const classes = useStyles(props);
    return (React.createElement("div", null, !today && (React.createElement("div", null, React.createElement("div", { className: clsx(classes.yearTag, classes.background) }, React.createElement("div", { className: classes.yearLabel }, React.createElement(Typography, { variant: "subtitle2" }, children))), React.createElement("div", { style: {
            height: year ? 120 : 20,
            display: 'flex',
            justifyContent: 'center'
        } }, React.createElement(Divider, { orientation: "vertical" })))), today && (React.createElement("div", null, React.createElement("div", { className: clsx(classes.yearTag, classes.backgroundToday) }, React.createElement("div", { className: classes.yearLabel }, React.createElement(Typography, { variant: "subtitle2" }, children))), React.createElement("div", { style: {
            height: 120,
            display: 'flex',
            justifyContent: 'center'
        } }, React.createElement(Divider, { orientation: "vertical" }))))));
};
MttYearTag.propTypes = {
    children: PropTypes.node.isRequired,
    year: PropTypes.bool,
    today: PropTypes.bool
};
//# sourceMappingURL=MttYearTag.js.map