import React from 'react';
import { makeStyles, Typography } from '@material-ui/core';
import Arrow from '@material-ui/icons/esm/ArrowForward';
import ProductAppListItem from './ProductAppListItem';
import { useTranslation } from 'react-i18next';
const useStyles = makeStyles((theme) => ({
    root: {
        '& > *': {
            margin: theme.spacing(0.5)
        },
        display: 'flex',
        flexWrap: 'wrap'
    },
    icons: {
        color: (props) => props.color
    },
    buttonGroup: {
        display: 'flex',
        marginRight: theme.spacing(3),
        width: 170
    },
    label: {
        color: theme.palette.getContrastText(theme.palette.secondary.light),
        marginTop: theme.spacing(2)
    },
    title: {
        color: theme.palette.getContrastText(theme.palette.secondary.light),
        minWidth: 320
    },
    moreAppContainer: {
        width: '100%'
    },
    moreApps: {
        color: theme.palette.getContrastText(theme.palette.secondary.light),
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-end'
    },
    arrow: {
        size: 18,
        marginLeft: theme.spacing(1)
    }
}));
const ProductAppList = (props) => {
    const classes = useStyles(props);
    const { apps, user } = props;
    const { t, i18n } = useTranslation();
    const AppGroup = (props) => {
        const { title, apps } = props;
        return (React.createElement("div", { className: classes.root }, React.createElement(Typography, { variant: "h6", className: classes.title }, t(title)), apps));
    };
    return (React.createElement("div", null, React.createElement(AppGroup, { apps: apps.map((item) => {
            return (React.createElement(ProductAppListItem, { key: item.id, label: t(item.label), redirectInfo: item.redirectInfo, image: item.image, icon: item.icon, user: user, getAccessToken: item.getAccessToken }));
        }) })));
};
export default ProductAppList;
//# sourceMappingURL=ProductAppList.js.map