import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { DotDivider } from '../../../../lib/ui/layout/DotDivider.js';
export function SupportedDeviceRow({ deviceModel, }) {
    return (_jsxs("div", { className: 'seam-row', children: [_jsx(ImageColumn, { deviceModel: deviceModel }), _jsx(ModelColumn, { deviceModel: deviceModel }), _jsx(StatusColumn, { deviceModel: deviceModel })] }));
}
export function ImageColumn({ deviceModel, }) {
    return (_jsx("div", { className: 'seam-col seam-device-image-col', children: _jsx("div", { className: 'seam-image-box', children: _jsx("img", { width: 40, src: deviceModel.icon_url }) }) }));
}
export function ModelColumn({ deviceModel, }) {
    return (_jsxs("div", { className: 'seam-col seam-model-col', children: [_jsx("div", { className: 'seam-model-name', children: _jsx("div", { className: 'seam-truncated-text', children: deviceModel.model_name }) }), _jsx("div", { className: 'seam-model-id', children: _jsxs("div", { className: 'seam-truncated-text', children: [deviceModel.manufacturer_model_id, _jsx(DotDivider, {}), connectionTypeNames[deviceModel.connection_type]] }) })] }));
}
export function StatusColumn({ deviceModel, }) {
    const statusColor = supportLevelColors[deviceModel.support_level] ?? 'unknown';
    return (_jsx("div", { className: 'seam-col seam-status-col', children: _jsx("div", { className: classNames('seam-status-pill', `status-${statusColor}`), children: _jsx("span", { children: status[deviceModel.support_level] }) }) }));
}
const supportLevelColors = {
    live: 'green',
    beta: 'blue',
    unsupported: 'unknown',
};
const status = {
    live: 'LIVE',
    beta: 'BETA',
    unsupported: 'Inquire',
};
export const connectionTypeNames = {
    wifi: 'Wifi',
    zwave: 'Z-Wave',
    zigbee: 'Zigbee',
    unknown: 'Unknown',
};
//# sourceMappingURL=SupportedDeviceRow.js.map