import React from 'react';
import { If, Then, Else } from 'react-if';
import * as colors from '../../mixins/colors';
import { Block } from 'jsxstyle';
class AppIcon extends React.Component {
    get appTitle() {
        return this.props.app.title || 'Untitled App';
    }
    render() {
        const { app, width, height, nativeWidth, nativeHeight } = this.props;
        const alphabetSymbol = app.title ? app.title[0].toUpperCase() : 'A';
        return React.createElement(Block, { width: width, height: height, props: {
                'data-component': 'app-icon',
                'data-app-id': app.id,
                title: this.appTitle
            } },
            React.createElement(If, { condition: !!this.props.app.icon },
                React.createElement(Then, null, () => (React.createElement(Block, { component: 'img', maxWidth: '100%', maxHeight: '100%', height: '100%', props: {
                        src: `${app.icon}?w=${nativeWidth}&h=${nativeHeight}`,
                        alt: `${this.appTitle} on Cloudflare Apps`
                    } }))),
                React.createElement(Else, null, () => (React.createElement(Block, { component: 'svg', props: { viewBox: '0 0 144 144' } },
                    React.createElement("rect", { x: '0', y: '0', width: '100%', height: '100%', rx: '30', ry: '30', fill: colors.accentGray3 }),
                    React.createElement("text", { textAnchor: 'middle', x: '50%', y: '50%', dy: '.36em', fill: colors.accentGray2, fontSize: '80', fontWeight: 'bold' }, alphabetSymbol))))));
    }
}
export default AppIcon;
//# sourceMappingURL=app-icon.js.map