// public/views/cards/clock.js
import { el, mount } from '../../dom.js';

let body, timer;
function fmt(tz) {
  return new Intl.DateTimeFormat('en-AU', {
    timeZone: tz, hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
  }).format(new Date());
}
function tick() {
  if (!body) return;
  mount(body,
    el('div', { class: 'sv-row', style: { fontSize: '22px' } },
      el('span', { style: { fontFamily: 'var(--font-mono)' } }, fmt('Australia/Melbourne'))),
    el('div', { class: 'sv-row' }, el('span', { class: 'k' }, 'Melbourne'), el('span', {}, 'AEST/AEDT'))
  );
}
export default {
  id: 'clock', title: 'Clock', size: 's',
  mount(el_) { body = el_; tick(); },
  start() { timer = setInterval(tick, 1000); },
  stop() { clearInterval(timer); body = null; }
};