import React from 'react';
import { makeStyles, styled, Typography, Box } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    rootContainer: {
        backgroundColor: theme.palette.background.paper,
        padding: '10px',
        width: '100%',
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-evenly',
        gap: '10px',
        [theme.breakpoints.down('sm')]: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'
        }
    },
    title: {
        textAlign: 'center',
        fontWeight: 500,
        letterSpacing: '0.15px',
        [theme.breakpoints.down('sm')]: {
            textAlign: 'left'
        }
    },
    description: {
        fontSize: '1.5rem',
        fontWeight: 300,
        letterSpacing: '0.15px',
        [theme.breakpoints.down('sm')]: {
            fontSize: '1rem',
            textAlign: 'left'
        }
    },
    descriptionColor: {
        color: (props) => props.textColor || theme.palette.text.primary
    }
}));
const Title = styled(Typography)(({ theme }) => ({
    textAlign: 'center',
    fontWeight: 500,
    letterSpacing: '0.15px',
    [theme.breakpoints.down('sm')]: {
        textAlign: 'left'
    }
}));
const Description = styled(Typography)(({ theme, color }) => ({
    fontSize: '1.5rem',
    fontWeight: 300,
    letterSpacing: '0.15px',
    color: color || theme.palette.text.primary,
    [theme.breakpoints.down('sm')]: {
        fontSize: '1rem',
        textAlign: 'left'
    }
}));
export const FluentCardText = (props) => {
    const classes = useStyles(props);
    const { title, description, sx, titleStyle, descriptionStyle, titleVariant = 'body2', loading = false, errorMessage = '' } = props;
    return (React.createElement(Box, { className: classes.rootContainer, style: sx }, React.createElement(Title, { variant: titleVariant, align: "center", style: titleStyle }, title), loading ? (React.createElement(Box, { style: {
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
        } }, React.createElement(Typography, { align: "center", className: classes.title, style: titleStyle }, "Loading.."))) : errorMessage ? (React.createElement(Description, { variant: "body2", align: "center", style: descriptionStyle, color: "error" }, errorMessage)) : (React.createElement(Description, { variant: "body2", align: "center", style: descriptionStyle }, description))));
};
//# sourceMappingURL=FluentCardText.js.map