"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var style_1 = require("./style");
var div = style_1.makeComponent("div");
var CardInner = div({
    $debugName: "card-inner",
    maxWidth: style_1.px(800),
    minWidth: style_1.px(200),
    maxHeight: style_1.px(800),
    minHeight: style_1.px(100),
    background: "white",
    boxShadow: "2px 0px 15px rgba(0,0,0,.5)",
    margin: "0 auto",
    padding: style_1.px(100)
});
var cardSelected = style_1.style({
    background: "rgba(150,200,200)",
    borderRadius: style_1.px(10),
    marginTop: style_1.px(20)
});
var CardOuter = div({
    $debugName: "card-outer",
    width: style_1.percent(100),
    padding: style_1.px(10)
});
exports.Card = function (_a) {
    var children = _a.children, className = _a.className, selected = _a.selected;
    return (<CardOuter className={className}>
    <CardInner className={style_1.classes(selected && cardSelected)} onClick={function () {
        return alert("onClick, etc, work.\nAll properties are passed down to the underlying element");
    }}>
      {children}
    </CardInner>
  </CardOuter>);
};
//# sourceMappingURL=Card.jsx.map