"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CalloutHeader = void 0;
const react_1 = __importDefault(require("react"));
const css_utilities_1 = require("@shopify/css-utilities");
const Icon_1 = require("../Icon");
const CalloutHeader_css_1 = __importDefault(require("./CalloutHeader.css"));
const STATUS_ICONS = {
    success: <Icon_1.Icon source="checkmarkCircle" appearance="accent"/>,
    cancelled: <Icon_1.Icon source="cancelCircle" appearance="accent"/>,
    warning: <Icon_1.Icon source="warningCircle" appearance="subdued"/>,
};
function CalloutHeader({ children, status, animated = true }) {
    const className = css_utilities_1.classNames(CalloutHeader_css_1.default.CalloutHeader, {
        [CalloutHeader_css_1.default.Animated]: animated,
    });
    return (<header className={className}>
      <div className={CalloutHeader_css_1.default.CalloutHeaderStatus}>{STATUS_ICONS[status]}</div>
      <div className={CalloutHeader_css_1.default.CalloutHeaderContent}>{children}</div>
    </header>);
}
exports.CalloutHeader = CalloutHeader;