import { tsx, create } from '@dojo/framework/core/vdom';
import * as css from '../theme/default/card.m.css';
import theme from '../middleware/theme';
const factory = create({ theme })
    .properties()
    .children();
export const Card = factory(function Card({ children, properties, middleware: { theme } }) {
    const themeCss = theme.classes(css);
    const { onClick, mediaSrc, mediaTitle, square, title, subtitle, kind = 'elevated' } = properties();
    const { header, content, actionButtons, actionIcons } = children()[0] || {};
    return (tsx("div", { key: "root", classes: [theme.variant(), themeCss.root, kind === 'outlined' && themeCss.outlined] },
        tsx("div", { key: "content", classes: [themeCss.content, onClick ? themeCss.primary : null], onclick: () => onClick && onClick() },
            header && (tsx("div", { key: "header", classes: themeCss.header }, header)),
            mediaSrc && (tsx("div", { title: mediaTitle, classes: [
                    themeCss.media,
                    square ? themeCss.mediaSquare : themeCss.media16by9
                ], styles: {
                    backgroundImage: `url("${mediaSrc}")`
                } })),
            title && (tsx("div", { classes: themeCss.titleWrapper },
                tsx("h2", { classes: themeCss.title }, title),
                subtitle && tsx("h3", { classes: themeCss.subtitle }, subtitle))),
            content && tsx("div", { classes: themeCss.contentWrapper }, content)),
        (actionButtons || actionIcons) && (tsx("div", { key: "actions", classes: themeCss.actions },
            actionButtons && tsx("div", { classes: themeCss.actionButtons }, actionButtons),
            actionIcons && tsx("div", { classes: themeCss.actionIcons }, actionIcons)))));
});
export default Card;

/*# sourceMappingURL=index.mjs.map*/