import React from 'react';
import { Button, makeStyles, Paper, Typography } from '@material-ui/core';
import { Header } from '../../stories/Header.jsx';
import { FluentIcon } from './FluentIcon.jsx';
import clsx from 'clsx';
import { UnityIcon } from './UnityIcon';
import { Divider } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
    root: {
        width: 320,
    },
    item: {
        width: 180,
        height: 180,
    },
    container: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    button: {
        marginTop: theme.spacing(2),
    },
    images: {
        height: theme.spacing(100),
        width: theme.spacing(100),
    },
    divider: {
        marginBottom: theme.spacing(2),
    },
}));
const SelectedLibraryItem = props => {
    const classes = useStyles();
    const { addItem, item, title } = props;
    return (React.createElement("div", { className: classes.root }, React.createElement("div", null, React.createElement(Typography, { variant: "overline" }, title)), React.createElement("div", { className: classes.divider }, React.createElement(Divider, null)), React.createElement("div", { className: classes.container }, React.createElement("div", null, React.createElement(Paper, { variant: "outlined", className: clsx(classes.item, classes.container) }, item.type === 'unity' ? (React.createElement(UnityIcon, { component: item.icon, size: "showcase" })) : (React.createElement(FluentIcon, { component: item.icon, size: "showcase" }))), React.createElement("div", { className: classes.container }, React.createElement("div", null, React.createElement(Typography, null, item.label)), React.createElement("div", { className: classes.button }, React.createElement(Button, { variant: "outlined", onClick: () => addItem(item), style: { textTransform: 'none' } }, title)))))));
};
export default SelectedLibraryItem;
//# sourceMappingURL=SelectedLibraryItem.js.map