import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BeeIcon } from '../../../../lib/icons/Bee.js';
import { useConnectedAccount } from '../../../../lib/seam/connected-accounts/use-connected-account.js';
import { DetailRow } from '../../../../lib/ui/layout/DetailRow.js';
import { DetailSection } from '../../../../lib/ui/layout/DetailSection.js';
export function DeviceInfo({ device, disableConnectedAccountInformation, disableResourceIds, }) {
    const { connectedAccount } = useConnectedAccount({
        connected_account_id: device.connected_account_id,
    });
    return (_jsxs(DetailSection, { label: t.deviceInfo, className: 'seam-device-details-device-info', children: [_jsx(DetailRow, { label: t.manufacturer, children: _jsxs("div", { className: 'seam-detail-row-hstack', children: [device.properties.model.manufacturer_display_name, device.properties.manufacturer === 'ecobee' && (_jsx(BeeIcon, { style: { fontSize: '33px' } }))] }) }), !disableConnectedAccountInformation && (_jsx(DetailRow, { label: t.linkedAccount, sublabel: connectedAccount?.user_identifier?.email ??
                    device.connected_account_id })), !disableResourceIds && (_jsx(DetailRow, { label: t.deviceId, sublabel: device.device_id }))] }));
}
const t = {
    deviceInfo: 'Device info',
    manufacturer: 'Manufacturer',
    linkedAccount: 'Linked account',
    deviceId: 'Device ID',
};
//# sourceMappingURL=DeviceInfo.js.map